让网页在用户计算机上保存一些临时或长期的信息

本地存储——对应localStorage对象

会话存储——对应sessionStorage对象

两者区别仅在于数据的寿命。他们都与网站的域联系在一起。同样的保存在计算机或移动设备上的数据也与设备是绑定的，网页不能访问保存在其他用户计算机上的数据

大多数浏览器把本地存储的限制设为5M，因此本地存储来缓存大图片或视频文件时不太适合的

存储数据

语法：localStorage[keyName]=data; 或sessionStorage[keyName]=data;

var localData = document.getElementById("localData").value;

localStorage["localData"] = localData;  

读取的时候也很简单：alert("你之前存储的本地数据是"+localStorage["localData"])；

还有可能某个键下面没有保存任何数据，检测值是否为空直接测试是否等于null

删除数据项

localStorage.removeItem("user_name");   //根据键名删除数据

或者是更厉害的sessionStorage.clear();  清空在本地的所有数据

查找所有数据项

key()方法，从本地或会话存储中取得所有数据项

function findAllItems() {

  var itemList = document.getElementById("itemList");

  itemList.innerHTML = "";

  for (var i=0; i<localStorage.length; i++) {

    var key = localStorage.key(i);  //取得当前位置的数据项的键名

    var item = localStorage[key];   //获取对应的值

    var newItem = document.createElement("li");

    newItem.innerHTML = key + ": " + item;

    itemList.appendChild(newItem);

  }

}

保存数值和日期

使用web存储会被自动转化为文本，那么如何存储数值呢？

x=Number(localStorage["mazeGame_currentX"])   //Number函数可将参数转化为数值

日期保存需要更麻烦的转换，可按照既定格式把日期转换为文本，之后再根据文本创建日期对象

var today = new Date();

SessionStorage["session_started"]=today.getFullYear()+"/"+today.getMonth()+"/"+today.getDate();   //按照YYYY/MM/DD的标准格式把日期转换为文本字符串

……

today=new Date(SessionStorage["session_started"]);       //创建日期对象，因为文本是有效的日期形式

保存对象

利用结构化数据，先在保存本地数据的地方使用JSON.stringfy()函数，然后在需要使用数据的地方调用JSON.parse()函数即可获得存储在本地的对象

相应存储变化

Web存储提供了在浏览器不同窗口间通信的机制

当第一个页面添加、修改、删除或清除数据的时候，设置了监听事件的第二个页面能获取到这些变化

第一个页面负责保存数据，此处不再赘述

第二个页面：

window.onload = function(){

    window.addEventListener("storage",storageChanged,false);   //把onStorage事件与storageChanged()函数联系起来。这里不是使用的window.onstorage,而调用的是监听，这样是为了保证在所有浏览器中都能执行

};

function storageChanged(e){

    var message=document.getElementById("updateMessage");

    message.innerHTML="本地存储有更新.";

    message.innerHTML="<br>key:"+e.key;    

    message.innerHTML="<br>Old value:"+e.oldValue;    

    message.innerHTML="<br>new Value:"+e.newValue;    

    message.innerHTML="<br>URL:"+e.url;    

}

更强大的本地存储  Indexed DB标准，

http://html5labs.interoperabilitybridges.com/prototypes/indexeddb/indexeddb/info    HTML5实验室中可以尝试了解一下