20. Js客户端存储

LXLong
94 阅读6分钟

Web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上。

Web应用就可以用这种方式来“记住”用户的偏好甚至是用户所有的状态信息，以便准确地“回忆”起用户上一次访问的位置。

Web应用可以选择它们存储数据的有效期

客户端存储

  • Web存储标准所描述的API包含localStorage对象和sessionStorage对象，是名值对的映射表
  • cookie是一种早期的客户端存储机制，起初是针对服务器端脚本设计使用的。
  • 微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——"userData"
  • HTML5标准中定义了一组“离线Web应用”API，用以缓存Web页面以及相关资源（脚本、CSS文件、图像等）。将Web应用整体存储在客户端，而不仅仅是存储数据。

任何形式的客户端存储不应该用来保存密码、商业账号或者其他类似的敏感信息。如果你利用客户端持久性将该信息存储起来，这无异于你将信用卡号写在一张便签纸上，随后粘贴在用户的键盘上，让所有人都看到。

1.localStorage和sessionStorage

实现了“Web存储”草案标准的浏览器在Window对象上定义了两个属性：localStorage和sessionStorage。这两个属性都代表同一个Storage对象——一个持久化关联数组，数组使用字符串来索引，存储的值也都是字符串形式的。

image.png

localStorage和sessionStorage两者的区别在于存储的有效期和作用域的不同：数据可以存储多长时间以及谁拥有数据的访问权。

浏览器仅仅支持存储字符串类型数据。如果想要存储和获取其他类型的数据，不得不自己手动进行编码和解码。

image.png

1.1 存储有效期和作用域

localStorage

  • 通过localStorage存储的数据是永久性的，除非Web应用刻意删除存储的数据
  • localStorage的作用域是限定在文档源（document origin）级别的。文档源是通过协议、主机名以及端口三者来确定的
  • 同源的文档间共享同样的localStorage数据（不论该源的脚本是否真正地访问localStorage）。它们可以互相读取对方的数据，甚至可以覆盖对方的数据。
  • 需要注意的是localStorage的作用域也受浏览器厂商限制。 sessionStorage
  • 通过sessionStorage存储的数据的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或者标签页被永久关闭了，那么所有通过sessionStorage存储的数据也都被删除了。
  • 与localStorage一样，sessionStorage的作用域也是限定在文档源中，非同源文档间都是无法共享sessionStorage的
  • sessionStorage的作用域还被限定在顶层窗口中。如果同源的文档渲染在不同的浏览器标签页中，那么它们互相之间拥有的是各自的sessionStorage数据，无法共享；

1.2 存储API

localStorage和sessionStorage通常被当做普通的JavaScript对象使用：通过设置属性来存储字符串值，查询该属性来读取该值。

  • 调用setItem()方法，将对应的名字和值传递进去，可以实现数据存储。
  • 调用getItem()方法，将名字传递进去，可以获取对应的值。
  • 调用removeItem()方法，将名字传递进去，可以删除对应的数据。
  • 调用clear()方法（不需要参数），可以删除所有存储的数据。
  • 最后，使用length属性以及key()方法，传入0～length-1的数字，可以枚举所有存储数据的名字。

image.png

1.3 存储事件

在绝大多数浏览器中，可以使用给Window对象设置onstorage属性的方式监听存储事件

与存储事件相关的事件对象有5个非常重要的属性

  • key--被设置或者移除的项的名字或者键名。如果调用的是clear()函数，那么该属性值为null。
  • newValue--保存该项的新值；或者调用removeItem()时，该属性值为null。
  • oldValue--改变或者删除该项前，保存该项原先的值；当插入一个新项的时候，该属性值为null
  • storageArea--这个属性值就好比是目标Window对象上的localStorage属性或者是sessionStorage属性。
  • url--触发该存储变化脚本所在文档的URL。

image.png

2. cookie

cookie是指Web浏览器存储的少量数据，同时它是与具体的Web页面或者站点相关的。

image.png 在JavaScript中，cookie用于保存状态以及能够为Web浏览器提供一种身份识别机制。但是，JavaScript中使用cookie不会采用任何加密机制，因此它们是不安全的。（但是，通过https来传输cookie数据是安全的，不过这和cookie本身无关，而和https:协议相关。）

可以通过检测navigator.cookieEnabled这个属性实现。若该值为true，则当前cookie是启用的；反之则是禁用的

image.png

cookie的作用域是通过文档源和文档路径来确定的。该作用域通过cookie的path和domain属性也是可配置的。

cookie的属性是secure，它是一个布尔类型的属性，用来表明cookie的值以何种形式通过网络传递。

2.1 保存cookie和读取cookie

由于cookie的名/值中的值是不允许包含分号、逗号和空白符，因此，在存储前一般可以采用JavaScript核心的全局函数encodeURIComponent()对值进行编码。相应的，读取cookie值的时候需要采用decodeURIComponent()函数解码

document.cookie = "name=oeschger";
document.cookie = "favorite_food=tripe";
alert(document.cookie);
// 显示: name=oeschger;favorite_food=tripe

document.cookie = "test1=Hello";
document.cookie = "test2=World";
var myCookie = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");
alert(myCookie);// 显示: World

3 应用程序存储和离线Web应用

HTML5中新增了“应用程序缓存”，它是将应用程序自身保存起来——应用程序所需运行的所有文件（HTML、CSS、JavaScript、图片等）。应用程序更像是被“安装”在那里，除非被用户“卸载”或者“删除”它们，“应用程序缓存”在真正意义上不是“缓存”，更好的说法应该称之为“应用程序存储”。

让Web应用能够实现“本地安装”的目的是要保证它们能够在离线状态（比如，当在飞机上或者手机没信号的时候）下依然可访问。

3.1 应用程序缓存清单

  • 想要将应用程序“安装”到应用程序缓存中，首先要创建一个清单：包含了所有应用程序依赖的所有URL列表。
  • 然后，在应用程序主HTML页面的＜html＞标签中设置manifest属性，指向到该清单文件
  • 应用程序缓存清单文件约定以.appcache作为文件扩展名
  • Web服务器真正识别清单文件的方式是通过"text/cache-manifest"这个MIME类型的一个清单

3.2 离线Web应用

离线Web应用指的是将自己“安装”在应用程序缓存中的程序，使得哪怕在浏览器处于离线状态时候依然可访问它。

可以使用localStorage来存储应用数据，然后当在线的时候再将数据上传到服务器。

image.png

通过navigator.onLine属性，可以检测浏览器是否在线

window的事件处理函数

  • onoffline 当浏览器进入离线状态时，在状态栏中显示离线消息。
  • ononline 当浏览器回到在线状态时，同步服务器，检查是否有新版本的数据，并且保存当前版本的数据。
avatar
文章
阅读
粉丝