数据存储之Web Storage

Web Storage是HTML5中提供的一套关于数据存储的解决方案。最早是网页超文本应用技术工作组在Web Applications 1.0规范中提出的。这个规范中的草案最终成为了HTML5中的一部分，后来又独立成为了自己的规范。它用来解决一些Cookie难以处理的存储问题。

Web Storage最新的规范版本是第2版，定义了localStorage和sessionStorage，前者为永久存储，后者为跨会话机制。这两种浏览器存储API提供了在浏览器中不受页面刷新影响而存储数据的两种方式。2009年之后所有主要供应商发布的浏览器版本在window对象上支持localStorage和sessionStorage。

本部分学习笔记摘抄自《JavaScript高级程序设计》第四版，第25章，客户端存储。

Session Storage对象

sessionStorage对象只存储会话数据，即其生命周期仅存在于会话存在期间，会话结束时则自动清除，也就是当页面关闭时就没有了。但是在里面存储的数据并不受页面刷新影响。存储在sessionStorage对象中的数据只能由最初存储数据的页面使用，对于多页应用程序的支持不是很好。

使用sessionStorage对象的方法很简单，可以使用setItem()方法向里面添加一个键值对数据，也可以使用属性直接存储数据。

存储过程因为需要写入磁盘，所以牵扯到读写方式问题。现代浏览器在实现存储写入时使用的是同步阻塞方式，所以数据会被立即提交到存储，在落实到API的具体实现上可能不会立即把数据存入磁盘，但在JavaScript中这种变化是不可见的，也就是表现为写入的任何数据都可以立即读取。但旧版IE（比如IE8）采用的事异步方式的数据写入，因此给数据赋值的时间和数据写入磁盘的时间略微会存在一些延迟，这种延迟在少量的数据上是完全看不出来的，但如果大量数据读入，可能会出现一些问题。在旧版IE中，可以考虑使用事务模式调用sessionStorage，比如在赋值之前使用sessionStorage.begin()，在赋值完成之后使用sesstionStorage.commit()提交事务，将数据强行写入磁盘。调用begin()是为了保证事务在代码执行期间没有磁盘写入的操作。

可以使用for循环遍历sessionStorage的值，使用length属性获得长度，使用key()方法传递下标获得键名，也可以使用for-in循环迭代key，然后使用getItem()方法获取值。

对于值的删除，可以使用delete sessionStorage.属性或者sessionStorage.removeItem('key')删除一个键值对。

sessionStorage应该用于存储会话期间有效的小块数据，如果需要跨会话持久存储，需要使用localStorage。

Local Storage对象

新修订的HTML5规范中，localStorage对象取代了globalStorage，这是一种在客户端进行持久化存储的机制，要访问同一个localStorage对象，页面必须来自同一个域，使用同样的端口和同样的协议，同一个域的子域也不可以。

localStorage也可以像sessionStorage那样使用键值对操作和属性直接访问存取数据，也就是setItem，getItem等方法。

存储在localStorage中的数据会一直保留，直到有JavaScript代码删除了它或者用户清除了浏览器缓存。localStorage数据不受页面刷新影响，也不会因窗口关闭、标签页或重新启动浏览器而丢失。

实际操作细节注意

这里要特别感谢之前合作过的一位全栈同学给我的启发

我在实际开发中用到过一次localStorage，模拟一个按顺序上菜的过程，做了一个厨师与服务员之间的生产者-消费者模式，其中模式里面的仓库就要借助localStorage完成，这是一个等待上菜的缓冲队列，本质上是一个数组，复合类型的数据。在我存到localStorage里面时，居然发现它变成了[Object object]，这是为什么呢？

因为，实际上这两者在存储时，存储的是字符串，引用类型并不能直接存储进localStorage，所以需要使用JSON.stringify将它转化成JSON，然后在获得的时候再使用JSON.parse转化成引用对象，就可以了。