sessionStorage会话存储&localStorage本地存储

什么是 HTML5 Web 存储?

使用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中的键值对会被清空