HTML 5 Web 存储 与 应用缓存（清晰明了）

HTML 5 Web 存储 与 应用缓存

缓存：

* 页面缓存: html、JS、CSS等,这些缓存资源是由于浏览器的行为而产生; 
* 数据缓存
---AppCache:  Cache Manifest 操作：
    * 需要服务器与客户端相互配合； 
    * 所有的缓存数据都由开发者直接完全地掌控。
---DOM Storage（Web Storage）： 
    * local storage和session storage；
    * 存储一些简单的用key/value对即可解决的数据

HTML5的LocalStorage和sessionStorage

在HTML5 最开始时，本地存储有两种方式：一种是web Storage，另一种是web SQL。

前言：由于web SQL的实现是基于SQLite，它更倾向于DataBase方向，且W3C官方在2011年11月宣布不在维护web SQL规范，故其API接口目前已经不属于HTML 5的范畴。因此，目前我们常讲的HTML 5本地存储，多指的是web Storage。

1、web Storage（LocalStorage + sessionStorage）

web Storage 是HTML5引入的一个重要的功能，在前端开发的过程中会经常用到，它可以在客户端本地存储数据，类似cookie，但其功能却比cookie强大的多。cookie的大小只有4Kb左右（浏览器不同，大小也不同），而web Storage的大小有5MB。其API提供的方法有以下几种：

• 1.setItem (key, value) —— 保存数据，以键值对的方式储存信息。
• 2.getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
• 3.removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
• 4.clear () —— 删除所有的数据
• 5.key (index) —— 获取某个索引的key

1.1 localStorage和sessionStorage的方法

setItem存储value

• sessionStorage.setItem(“key”, “value”);
• localStorage.setItem(“site”, “js8.in”);

getItem获取value

• var value = sessionStorage.getItem(“key”);
• var site = localStorage.getItem(“site”);

removeItem删除key

• sessionStorage.removeItem(“key”);
• localStorage.removeItem(“site”);

clear清除所有的key/value

• sessionStorage.clear();
• localStorage.clear();

综合案例1

var storage = null;  
if(window.localStorage){              //判断浏览器是否支持localStorage  
   storage = window.localStorage;       
   storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
   alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  

   storage.removeItem("name");     //调用removeItem方法，移除数据  
   alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null  

}  

综合案例2 —— 实际开发

const STORAGE_KEY='todos-vuejs'   
 // const是ES6中的语法，todos-vuejs是保存的键

// 导出
export default {
    fetch:function(){     // 取出数据  —— 注意：localStorage是json格式的数据，需要转为数组使用
       return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]');
    },
    save:function(items){   // 保存数据
        window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
    }
}

1.2其他操作方法：点操作和[ ]

web Storage可以像普通对象一样用点(.)操作符，及[ ]的方式进行数据存储，像如下的代码：

    var storage = window.localStorage; 
    storage.key1 = "hello"; 
    storage["key2"] = "world"; 
    console.log(storage.key1); 
    console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历例如下面的代码：

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){     
    var key = storage.key(i);     
    var value = storage.getItem(key);     
    console.log(key + "=" + value); 
}

2、storage事件

storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){
    window.addEventListener("storage",handle_storage,false);
}
else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage);
} 
function handle_storage(e){     
    if(!e){
        e=window.event;
    }
}

3、两者之间的区别

3.1 LocalStorage和sessionStorage功能

• localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。
• sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

3.2 localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

sessionStorage需要注意的有以下几点：

• （1）页面刷新不会消除数据，浏览器或者页面关闭才会清除数据；
• （2）只有在当前页面打开的链接，才可以访sessionStorage的数据；
• （3）使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据
• （4）sessionStorage不跨窗口，在另外一个窗口打开sessionStorage就不存在了，它只在当前窗口有效；
• （5）大小不超过5M；
• （6）不自动发送数据到服务器
• 验证：准备两个html文件，index.html和text.html。

index.html代码

  
  
  
      
      
      
  
  
      Your name is:  
       
       
     点击打开  
  

test.html代码

（1）页面刷新不会消除数据

• 当点击show按钮后，输入框内显示 “null“，此时sessionStorage中没有存储key为 ”name“的数据。
• 当在文本中输入”Rick“后，点击login按钮，待输入框清空的时候，数据已经存储到sessionStorage中，再去点击show按钮，会显示” Rick“
• 此时，点击浏览器刷新网页，再点击show按钮，输入框中显示的依旧为”Rick“。

（2）只有在当前页面打开的链接，才可以访sessionStorage的数据；

点击页面上的 “点击打开” ，就会弹出对应的index.html文件存储的sessionStorage数据

其他说明：

后来又经过其他一些测试，发现当从index.html打开text.html页面后，关闭index.html，刷新text.html还可以访问到sessionStorage中的数据。只有当全部关闭index.html和从其内部打开的所有页面 或者直接关闭浏览器，才可以消除sessionStorage中的数据。