Storage

Web Storage

1.1 概述

Web Storage是HTML5提供的一种新的浏览器端数据储存机制，它提供两种数据存储的对象：

localStorage：该对象存储的数据没有时间限制；

sessionStorage : 该对象存储的数据仅用于浏览器的一次对话，当对话结束（通常是窗口关闭），数据被清空；

1.2 特性

localStorage 和 sessionStorage对象都是构造函数Storage的实例，拥有同样的属性和方法，二者唯一的区别是存储数据的期限不一；

localStorage和sessionStorage这两个对象相较于cookie的存储机制，能够提供更大的数据存储空间，但是存储空间根据浏览器类型而定，一般Chrome是2.5MB、Firefox和Opera是5MB、IE是10MB；

目前现代浏览器均支持web存储，但IE 7-是不支持的，依旧采用传统的cookie保持信息；检测浏览器是否支持web存储的方法有：

使用Web Stroage的API进行数据存储是，只能存储为字符串数据，因此所以数据在写入时会隐式调用toString方法转换为字符串；

【注意事项】

使用前要判断浏览器是否支持Web Stroage(无痕模式和低版本的IE不支持)；

超出存储容量的处理；

避免敏感信息存入Web Storage，要注意[XXS]()的注入风险

1.3 优势与局限性

优势

存储空间大：与cookie的4k存储空间相比，Web Storage虽然不同浏览器的标准可能不一样，主流的一般都在5~10M；

页面性能优化：本地存储的数据不会被发到服务器，与cookie相比，节省带宽，加快响应速度

接口更加易用

局限性

server端无法获取本地数据，如有需求，可通过post/get方法；

只能同源共享数据；

参考

https://segmentfault.com/a/1190000007819185