h5 localstroge本地存储

近期一个项目中要求前端h5中记录一些数据，这些数据一只保存，除非用户手动清除才失效，其他情况包括会话过期一律不失效，此时就用到了LocalStorage，因为LocalStorage没有过期时间，除非手动删除它会一直存在。

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对形式；

三者的区别；

• LocalStorage
• SessionStorage
• Cookie

LocalStorage和SessionStorage都是本地存储，不会被发送到服务器上。同时空间比Cookie大很多，一般支持5-10M。 与Cookie类似，每个域名下会有不同的localStorage和SessionStorage实例，而且localStorage可以在多个标签页中互相访问。 其中LocalStorage没有过期时间，除非手动删除它会一直存在。而SessionStorage在浏览器会话结束时（关闭标签页，不包括刷新和跳转）清空。

Storage的使用

LocalStorage/SessionStorage提供的存储也是基于字符串的键值对。可以通过setItem，getItem来访问其中的存储项:

let param = {
             "name": "zhangsan",
             "age": 18,
             "sex": "female",
             "phone": "8888888",
            };
localStorage.setItem("commonData", JSON.stringify(param));

在控制台运行效果如下，可以看到localStorage中已经存有commonData了；因为它只能存储字符串，要存JSON只能序列化为字符串；

setIte.png

从localStorage获取commonData的值：
JSON.parse(localStorage.getItem("commonData"))

getItem.png

清除localStorage某条信息；
｀localStorage.removeItem("commonData");｀

removeItem.png

清除localStorage保存对象的全部数据
localStorage.clear();