数据存储之Web Storage

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

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

本部分学习笔记摘抄自《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那样使用键值对操作和属性直接访问存取数据,也就是setItemgetItem等方法。

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

实际操作细节注意

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

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

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

打赏
  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2018-2021 Shawn Zhou
  • Hexo 框架强力驱动 | 主题 - Ayer
  • 访问人数: | 浏览次数:

感谢打赏~

支付宝
微信