使用JS在页面上缓存数据

使用 localStorage.setItem() 存储数据

什么是localStorage？

        在HTML5中，加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它只能存储字符串格式的数据，所以最好在每次存储时把数据转换成json格式，取出的时候再转换回来。

localStorage有何优点？

1、localStorage拓展了cookie的4K限制
2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的
3、localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

 localStorage有何缺点？

1、浏览器的大小不统一，并且在 IE8 以上的 IE 版本才支持 localStorage 这个属性。
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换。
3、localStorage在浏览器的隐私模式下面是不可读取的。
4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5、localStorage不能被爬虫抓取到。
localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。 

localStorage如何使用？

localStorage.setItem(key,value)：将value存储到key字段

localStorage.getItem(key)：获取指定key本地存储的值

localStorage.removeItem(key)：删除指定的key

For Example ： 

//定义一个存储对象
var list=[{"name":"张三","age":25},{"name":"李四","age":20}];

//将该对象存储存储
localStorage.setItem("objList", JSON.stringify(list)); 

//将json字符串转换成json对象
(JSON.parse(localStorage.getItem("objList")))

//删除指定的key
localStorage.removeItem("objList")