使用HTML5可以在本地存储用户的浏览数据。
早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能
主要分为两种 sessionStorage会话存储&localStorage本地存储
先来介绍下sessionStorage会话存储
会话级存存储 浏览器到浏览器之间产生数据–key-value,当会话结束时,会话级数据消失
//查看对象 window.sessionStorage可以看到sessionStorage是个全局对象
//存储 sessionStoraget[key] = 'value'; //读取 var value = sessionStoryaget[key]; // 获取数据的个数 sessionStorage.length // 删除一个数据 sessionStorage.removeItem('key'); // 清除所有的数据 sessionStorage.clear();sessionStorage的特点
sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。sessionStorage在浏览器关闭以后会自己清除掉sessionStorage它不能跨普通的页面,也不能跨域localStorage本地存储 跨会话级存储/本地存储 在客户端文件系统/硬盘中存储客户端与服务器间的访问数据 --> key-value对形式,即使浏览器关闭,甚至计算机关闭,数据仍然存在
// 存储一个数据 localStorage[key] ='value'; localStorage.setItem('key','value'); // 读取一个数据 var value = localStorage[key]; localStorage.getItem('key'); // 获取数据的个数 localStorage.length // 删除一个数据 localStorage.removeItem('key'); // 清除所有的数据 localStorage.clear();localStorage的优势
1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是这个却是只有在高版本的浏览器中才支持的
localStorage的局限
1、浏览器的大小不统一,并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型,这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡
5、localStorage不能被爬虫抓取到
localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空