Web存储机制

发表于   |   分类于   |  

Web Storagede 的两个主要目标是：

  • 提供一种在cookie之外的存储会话数据的途径
  • 提供一种存储大量可以跨会话存在的数据的机制

1. Storage类型

Storage类型提供最大的存储空间（因浏览器而异）来存储名值对。Storage的实例与其他对象类似，有如下方法：

  • clear() : 删除所有值
  • getItem(name) : 根据指定的名字name获取对应的值
  • key(index) : 获取index位置处的值得名字
  • removeItem(name) : 删除由name指定的名值对
  • setItem(name,value) : 为指定的name设置一个对应的值

2. sessionStorage对象

sessionStorage对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。
这个对象就像会话cookie，也会在浏览器关闭后消失。
存储在sessionStorage中的数据可以跨越页面刷新而存在，并且如果浏览器支持，浏览器崩溃并重启之后依然可用（FF和Webkit都支持，IE不支持）。
由于sessionStorage对象其实是Storage的一个实例，所以可以使用setItem()或者直接设置新的属性来存储数据，方法如下：

  • 使用方法来存储数据
    sessionStorage.setItem("name","Yao");

  • 使用属性来存储数据
    sesstionStorage.hello="world";

sessionStorage中有数据时，可以使用getItem()或者通过直接访问属性名来获取数据。
方法如下：

  • 使用方法来读取数据
    var name = sesstionStorage.getItem("name");

  • 使用属性来读取数据
    var hello = sessionStorage.hello;

3. localStorage对象

localStorage对象作为持久保存客户端数据的方案取代了globalStorage。
要访问localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口。
由于localStorage是Storage的实例，所以可以像使用sessionStorage一样来使用它：

  • 使用方法来存储数据
    localStorage.setItem("name","Yao");

  • 使用属性来存储数据
    localStorage.hello="world";

  • 使用方法来读取数据
    var name = localStorage.getItem("name");

  • 使用属性来读取数据
    var hello = localStorage.hello;

~End~