利用localStorage对数据缓存

Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生

文件位置： C:\Users\tao-r\AppData\Local\Google\Chrome\User Data\Default\Local Storage

特点：

1。localStorage缓存数据，要通过域名访问，按域名存储

2。相比cookie，localStorage可以持久化存储，没有过期时间

3。相比cookie的KB级别的存储大小，localStorage的5MB级别的存储量相当大

4。现代主流浏览器（包括手机端），几乎全部支持localStorage

存储字符串

text_data= 'hello localStorage';

语法一：localStorage.text_data = text_data ;

语法二：localStorage.setItem('text_data_2', 'hello localStorage 2');

存储json数据

json_data = {"code":200,"data":[{name:'name1',val:'val1'},{name:'name1',val:'val1'}]} ;

语法一：localStorage.test= JSON.stringify(json_data);

语法二 : localStorage.setItem('test_2', JSON.stringify(json_data) );

读取localStorage中数据：

语法一： localStorage.test

语法二： localStorage.getItem()

清理数据

清理当前域名下全部：localStorage.clear();

清理指定数据： localStorage.removeItem('test_2');

使用场景：

1。用户上次输入的记录

2。减少前端向后端的数据发送次数

跨域访问解决方法

1，服务器中转

2。iframe方式

3。postMessage传递消息