面试之HTML5 Web存储
前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别)
HTML5 Web存储,一个比 cookie 更好的本地存储方式,什么是 HTML Web存储?
定义:使用HTML5 可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie,但是Web存储需要加载更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站,它也可以存储大量的数据,而不影响网站的性能。(数据以键/值对存在,web网页的数据只允许该网页访问使用)
localStorage(本地存储)
localStorage 对象存储的数据没有时间限制,用于长久保存整个网站的数据
常用API(localStorage相当于window下面的一个属性,故可以使用 . 方法和 [] 方法)
- 保存数据
localStorage.name = 'zhangsan'
// 或者
localStorage.['name'] = 'zhangsan'
// 或者
localStorage.getIten('name','zhangsan') - 读取数据
// 自身方法
localStorage.getItem("name");
// []方法
localStorage["name"];
// .方法
localStorage.name; - 删除单个数据(使用delete关键字)
// 自身方法
localStorage.removeItem("name");
// []方法
delete localStorage["name"];
// .方法
delete localStorage.name - 删除所有数据
localStorage.clear()
- 得到某个索引的值
1 // 通过自身的key
2 for (var i=0;i<localStorage.length;i++) {
3 console.log(localStorage.key(i));
4 }
5
6 // 通过for in 循环获取
7 for(var key in localStorage){
8 console.log(key);
9 } - 获取所有值
localStorage.valueOf();取出所有的值
- 判断是否具有某个key
localStorage.hasOwnProperty("name")
// 如果存在的话返回true,不存在返回false
注:1.localStorage特定于页面的协议,不在同一域名下不能访问
2.数据有大小限制,5M左右,不同浏览器大小会有不同
3.生命周期是永久的,但是数据实际是存在浏览器的文件夹下的,卸载浏览器数据可能就会删除
4.浏览器可以设置是否可以访问数据,如果设置不允许则会访问失败
5.兼容IE8以上浏览器
6.默认情况下是以字符串形式存储的,可以根据个人需要进行数据类型转换
sessionStorage(会话存储)
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除
常用API(同上,和localStorage类似)
注意事项也和localStorage类似,唯一不同的就是数据存储周期不一样
面试之HTML5 Web存储的更多相关文章
- HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...
- HTML5 web 存储
简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...
- HTML5 Web存储 页面间进行传值
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...
- HTML5: HTML5 Web 存储
ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...
- 有趣的HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 web存储
既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...
- 使用HTML5 Web存储的localStorage和sessionStorage方式
localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...
随机推荐
- Android:cmake开发指南
一.静态库与动态库构建 (.so)共享库,shared object:节省空间,在运行时去连接,如果执行机器上没有这些库文件就不能执行. (.a)静态库,archive:静态库和程序化为一体,不会分开 ...
- sqlmap注入工具----一次简单的注入(实战)
最近在学习网络安全,挖洞避免不了要使用许多工具,使用著名注入工具sqlmap的时候,对于英语不怎么好的我就比较难受了,本来就不会使用,加之又是英语的,简直难受.上网找了好多详细教程,但是命令实在是太多 ...
- Mysql——索引相关
索引失效的情况: 随着表的增长,where条件出来的数据太多,大于20%左右,使得索引失效(会导致CBO计算走索引花费大于走全表)
- Linux学习笔记之系统中的分区和文件系统
转自 http://blog.csdn.net/hanxuehen/article/details/8229472
- JS_&&||
&& 且 当第一个参数为flase 就懒惰了,后面那个无视了,当第一个参数为ture,再去贪婪:|| 或 当第一个参数为flase 就贪婪了,继续找和面个了,当第一个参数为ture,就 ...
- Flutter 贝塞尔曲线切割
现在人们对于网站的美感要求是越来越高了,所以很多布局需要优美的曲线设计.当然最简单的办法是作一个PNG的透明图片,然后外边放一个Container.但其内容如果本身就不是图片,只是容器,这种放入图片的 ...
- MATLAB 2016b + CUDA10.1 +MatConvNet beta25 安装踩坑记
最近因为目标跟踪实验需要得安装MatConvNet,由于已经是2019年了大家的软件版本肯定不可能是像官网要求的那样,所以安装自然而然就会碰到很多问题.在这一过程中我参考了网上很多博主的经验,有些确实 ...
- ffmpeg学习笔记-ffmpeg在VS下的运用
ffmpeg官网提供了window平台下额开发工具供开发者使用,这篇文章主要以3.2版本的ffmpeg作为演示,记录在VS2013下,怎么去编译ffmpeg 下载 在官网中,按照以下步骤下载 下载Wi ...
- [LuoguP2159][SHOI2009]舞会_动态规划_高精度_排列组合
舞会 题目链接:https://www.luogu.org/problem/P2159 数据范围:略. 题解: 不会.... 看了题解觉得自己好傻逼啊
- kafka producer consumer demo(三)
我们在前面把集群搭建起来了,也设置了kafka broker的配置,下面我们用代码来实现一下客户端向kafka发送消息,consumer端从kafka消费数据.大家先不要着急着了解 各种参数的配置,先 ...