H5本地储存那些事儿

html5新增了本地储存web Storage API，相较于cookies被限制在4KB，web Storage 有了更大的容量5MB。
web Storage 分为两种：

1、sessionStorage 临时保存，浏览器关闭即删除；

2、localStorage 永久保存，除非手动删除或者清空磁盘。

他们都有四个函数，分别是setItem、getItem、removeItem和clear。localStorage和sessionStorage 的语法都相同，这里只演示localStorage
localStorage.setItem(键名,键值) //存储数据信息到本地
localStorage.getItem(键名) //读取本地存储的信息
localStorage.removeItem(键名) //删除本地存储的信息
localStorage.clear() //清空所以存储的信息
//这四个函数的用法示例：

localStorage.setItem(键名,键值)

localStorage.getItem(键名)

localStorage.removeItem(键名)

localStorage.clear()

语法记这么简单，接下来看看实例操作。

demo

打开网页我们可以看到

sessionStorage

localStorage

当我们关闭浏览器重新打开

我们会发现session已经被清除，而localStorage还存在。
我们现在在success.html下获取

success.html下获取

获得结果

提交JSON对象格式

结果

发现并不是我们想要的形式，原来他们的储存形式都是以字符串的格式。
那么我们先转化为字符串。

转化为字符串

储存结果

既然存的是字符串，那么获取到的必然也是字符串。那我们在转化为

解析

结果

语法都一样。自行测试吧。