利用 localStorage 可以简单地存储一些 JSON 对象,可以方便简易地应用数据存储。我们注意到 localStorage 存储的值都是字符串类型,在处理复杂的数据时,需要借助 JSON 类,将 JSON 字符串转换成真正可用的 JSON 格式。
使用 JSON.stringify() 方法将 JSON 对象转换为字符串后,再进行存储,即可保存 JSON 对象 . 使用 JSON.parse() 方法将取出的字符串转换为 JSON 对象,即可得到存储的 students 的 JSON 对象。
可以使用 localstorage 记录用户表单输入,即使关闭浏览器,下次重新打开浏览器访问,也能读出表单中输入的值,避免用户重新输入,这可以给用户带来更加完善的体验方式。
localStorage 还提供了一个 storage 事件,在存储的值改变后触发。监听 storage 事件,可以获取改变的字段、改变字段的旧值和新值。通过 storage 事件,可以实现跨文档数据传递。
本地存储只支持字符串的存取,那么我们要做的就是将图片转换成 Data URI 。其中一种实现方式就是用 canvas 元素来加载图片,将 Data URI 的形式从 canvas 中读取出当前展示的内容。
保存任意格式的文件基本思路是首先使用 XMLHttpRequest 请求文件,然后将响应头设置为 "arrayBuffer" ;其次将返回数据存。
localStorage 能够实现基本的数据存储,但是对复杂数据的处理过程比较复杂。首先, localStorage 是同步的,不论数据多大,都需要等待数据从磁盘读取和解析,这会减慢应用程序的响应速度,这在移动设备上是特别糟糕的,主线程被挂起,直到数据被取出,会使你的应用程序看起来慢,甚至没有反应。此外, localStorage 仅支持字符串,需要使用 JSON.parse 与 JSON.stringify 进行序列化和反序列化。这是因为 localStorage 中仅支持 JavaScript 字符串值,不支持数值、布尔值、 Blob 类型的数据。 Mozilla 开发一个名为 localForage 的库,使得离线数据存储在任何浏览器存储都非常方便和易用。
localForage 是一个使用非常简单的 JavaScript 库,提供了 get 、 set 、 remove 、 clear 和 length 等 API ,还具有以下特点 。
对于设置在 sessionStorage 中的对象,只要浏览器窗口(或标签)不关闭,它们就会一直存在。当用户关闭窗口或浏览器时, sessionStorage 数据将被清除。所以开发人员不应该把真正有价值的东西放在里面,因为不能任何时候查询这些数据都存在。
sessionStorage 非常适合用于短时存在的流程中,如对话框和向导。如果数据需要存储在多个页面中,同时又不希望用户下一次访问应用程序时重新部署,则可将这些数据存储在 sessionStorage 中。以前,这类数据可能需要通过表单和 cookie 提交,并在页面加载时来回传递,而使用 Storage 可以避免这种开销。
sessionStorage 还有另外一种特殊用法:数据作用域。它解决了一个一直存在于诸多 Web 应用程序的问题,以购买机票的购物应用程序为例,在这个应用程序中,诸如理想的出发返回日期这样的用户偏好数据,可能会在浏览器和服务器间使用 cookie 来回传送,为的是在用户使用应用时,服务器应用程序能记住用户先前选择的偏好数据。
不过,用户打开多个窗口是很常见的,它们可能在查看旅游产品时同时打开多个窗口,比较不同代理商同一时间起飞的航班。这会导致 cookie 系统出现问题,因为如果一个用户在比较价格和是否有票等信息时会在浏览器窗口之间来回切换,很可能会在其中一个窗口设置 cookie 值,而在其它窗口中意外地将这些值应用到 URL 相同的另一个网页的后续操作中。这一现象也被称为数据泄露。其产生的根本原因在于 cookie 能够被同源网页共享。
而使用 sessionStorage 能够跨页面(使用该应用的页面)暂存如启程日期这样的临时数据,又不会将其泄露到用户仍在浏览的其它航班信息的窗口中。这样,不同的偏好信息就会被隔离在预订相应航班的窗口中。