离线存储

Web存储机制

Web Stroage的两个主要目标：

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

—— storage类型：
提供最大的存储空间来存储名值对儿。有如下方法：

clear()：删除所有值。firefox中没有实现。
getItem(name)：根据指定的属性名字获取对应的值。
key(index)：获得index处的值的名字（index处的属性名）。
removeItem(name)：删除由name指定的名值对儿。
setItem(name,value)：为指定的name设置一个对应的值。
【其中，getitem(),removeItem()和setItem()方法可以直接调用，也可以通过Storage对象间接调用】
注意：Storage类型只能存储字符串。非字符串的数据会在存储之前被转换成字符串。

——sessionStorage对象：
存储特定于某个会话的的数据，即该数据只会保存到浏览器关闭。存储在sessionStorage中的数据可以跨页面刷新而存在。
sessionStorage对象其实是Sorage的一个实例，则其对应的一些方法也可以拿来使用。

sessionStorage.setItem("name","huang");//使用方法存储数据
var name = sessionstorage.getItem("name");//使用方法读取数据
sessionStorage.book = "huang";//使用属性存储数据
var book = sessionstorage.book;//使用属性读取数据

如何输出存储的名值对儿：
@可以通过结合length属性和key()方法来迭代sessionstorage中的值。如下所示：

sessionStorage.setItem("name","1");
    for(var i =0;i < sessionStorage.length;i++) {
        var key = sessionStorage.key(i);
        var value = sessionStorage.getItem(key);
        console.log(key + "=" + value);//name = 1
    };

var date = new Date();
    for(var k = 0;k < 5;k++) {
        sessionStorage.setItem(k,date.getTime() );
        var b = sessionStorage.getItem(k);
        console.log(b);//b的结果如下图

这里写图片描述

上面代码是这样遍历sessionStorage中的名值对儿的：首先通过key()方法获取指定位置上的属性名字，然后再通过getItem()找出对应该名字的值。

@还可以使用for-in循环来迭代sessionStorage中的值：如下：

//每次经过循环的时候key被设置为sessionStorage中下一个名字
 sessionStorage.setItem("name","huangQian");
  console.log(sessionStorage.length);//1
    for(var key in sessionStorage) {
        var value = sessionStorage.getItem(key);
        console.log(key+"="+value);
    }
    //总的输出结果如下图

这里写图片描述

要删除存储的数据时，可使用delete操作符或者removeItem()方法。如下：

sessionStorage.setItem("name","huangQian");
   /* delete sessionStorage.name;*/
  sessionStorage.removeItem("name");
  var name = sessionStorage.getItem("name");
    console.log(name);//null

——globalStorage对象：
该对象目的是跨越会话存储数据，但是有特定的访问限制，要使用该对象，首先要指定哪些域可以访问该数据。可以通过方括号标记然后使用属性来实现。

扫描二维码关注公众号，回复： 3325348 查看本文章

globalStorage["wrox.com"].name = "huang";//存储数据
var name = globalStorgage["wrox.com"].name;//获取数据
//或者
globalStorage["location.host"].name = "huang";//比较安全的域名

解析：对于globalStorage空间的访问，是依据发起请求的页面域名，协议和端口来限制的。例如使用HTTPS协议在wrox.com中存储了数据那么就不能使用通过HTTP协议访问的wrox.com的页面访问数据。同样的道理如果是同一种协议同一个域但是是不同端口也不能共享数据。如果不能确定域名，那么使用location.host作为属性名比较安全。

——localStorage对象：
与globalStorage不同，不能给localStorage对象指定任何访问规则。要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。相当于globalStorage[location.host]。

globalStorage是Storage的实例，用法与前面的sessionStorage用法一样。

存储在localStorage中的数据与存储在globalStorage中的数据一样遵循相同的规则：数据保留到JavaS删除或者是用户清除浏览器缓存。

为了兼容只支持globalStorage的浏览器，可以创建下面函数：

 function getLocalStorage() {
        if(typeof  localStorage == "object") {
            return localStorage;
        }
        else if(typeof globalStorage == "object"){
            return globalStorage[location.host];
        }
        else{
            throw new Error("Local storage not available");
        }
    }
    //此处调用一次函数，就可以正常的写入数据了
    var storage = getLocalStorage();
  storage.setItem("name","huang");
    console.log(storage.name);//huang

——storage事件：
对storage对象进行任何修改，都会在文档上触发storage事件。如：当通过属性或者setItem（）方法保存数据，使用delete操作符或者removeItem()方法删除数据，或者调用clear()方法时都会发生该事件。
这个事件的event对象有以下属性：

domain:发生变化的存储空间的域名。
key:设置或者删除的键名。
newValue:如果是设置值则是新值，如果是删除值，则是null。
oldvalue:键被更改之前的值。

Web存储机制

猜你喜欢