H5的——Web存储

分2种

localStorage 和 sessionStorage 这都是客户端的

localStorage – 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage – 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
IE7及更早版本不支持，因为浏览器可能不支持所以我们一般要进行一下判断是否支持
if(typeof(Storage)!==”undefined”)
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码…..
} else {
// 抱歉! 不支持 web 存储。
}

localStorage 对象

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如：
localStorage.sitename=”菜鸟教程”; // 这里的sitename可以你任意取变量。
document.getElementById(“result”).innerHTML=”网站名：” + localStorage.sitename;
解释：
使用 key=”sitename” 和 value=”菜鸟教程” 创建一个 localStorage 键/值对。
检索键值为”sitename” 的值然后将数据插入 id=”result”的元素中。
移除 localStorage 中的 “sitename” :
localStorage.removeItem(“sitename”);

localStorage 和 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
// 下面的key值就和上面localStorage.sitename中你定义的sitename是一样的
保存数据：localStorage.setItem(key,value); 解释：这里一次性保存的是2个变量，可以通过getItem来查找key取得里面的value值,但不能通过查找value来取key值，getItem只能看key
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
注意: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。
得到某个索引的key：localStorage.key(index);

sessionStorage 对象

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
例子： // sessionStorage.clickcount的clickcount是自己定义的变量

 function clickCounter()
 {
     if(typeof(Storage)!=="undefined")
     {
         if (sessionStorage.clickcount)
         {
             sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
         }
         else
         {
             sessionStorage.clickcount=1;
         }
         document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
     }
     else
     {
         document.getElementById("result").innerHTML="抱歉，您的浏览器不支持 web 存储";
     }
 }
 // 删除方法
 function del(name) {
   localStorage.removeItem(name);
   alert("删除成功!");
   loadAll();
 }
 
 点我！

作用域:
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。

sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。