标签：
目前大家熟知的存储API 除了cookie 还有localstorage,sessionage indexDb等下面详细介绍常用的API的调用方式，及其需要注意的地方：
cookie 用纯js操作相对繁琐些，因此用的时候 大多都是引用的封装好的包，但是作为js的基础研究者，我们再拿出来看看
cookie 是document对象的一个方方法，每次请求url时都会传递到服务器现代浏览器允许cookie总数超过300个，但是部分浏览器对单个cookie大小限制仍然有4Kb的限制
先来cookie 存储都有哪些选项
name 要存储的cookie名字
value 要存储的cookie的值 不允许包含分号，逗号和空白符 因此存储钱一般都可以采用encodeURIComponent()对值进行编码，读取的时候 用decodeURIComponent()进行解码
max_age 单位为秒 要超时的秒数
path 如果把路径设置成："/" 那么cookie 可以对任何 http://www.example.com这台服务器上的页面都是可见的 （该状况下和localstorage具有同样的作用域）
如果把路径设置成："/catalog" 那么cookie 可以对任何 http://www.example.com/catalog/ 下面的页面都是可见的 （不能通过path来做访问控制-588）
domain 默认为当前服务器的域
子域之间的cookie共享可通过设置".example.com"，path设置成："/"
那么该cookie 就对所有catalog.example.com、orders.example.com以及其他.example.com 域下的任何服务器都可见
secure bool类型的值 表明cookie 以何种方式通过网络传递 默认是以不安全的形式传递的
document.cookie=name=encodeURIComponent(value);max_age=1200;path="/"domain="";secure; 其中name和value 是必须的 安全传递的 document.cookie=name=encodeURIComponent(value);max_age=1200;path="/"domain=""; 其中name和value 是必须的 以不安全的形式传递的
function getCookie(){
var cookie={};
var all=document.cookie;
if(all==="") return cookie;
var list=all.split(";");
for(var i=0;i<list.length;i++){
var cook=list[i];
var p=cook.indexOf("=");
var name=cook.substring(0,p);
var value=cook.substring(p+1);
value=decodeURIComponent(value);
cookie[name]=value;
}
return cookie;
}
只需要一个name 即可
document.cookie=name=;max_age=0
这个两个属性都代表同一个Storeage对象： 一个持久化关联的数组 数组使用字符串来索引 存储的值也是字符串形式的
两者的主要区别为：
localStorage 用于长期保存网站的数据并且站内任何页面都可访问该数据
sessionStorage 用于临时保存针对一个窗口或者标签页的数据 书上介绍的是： 在访客关闭窗口活标签页之前，这些数据都是存在的，而关闭之后就会被浏览器删除；不过只要用户不关闭窗口或者标签页，就算他从你的网站跑到别人的网站再回来，数据依然是存在的
(可跨越页面刷新而存在) 存储在sessionStorage中的数据 只能由最初给对象存储数据的页面能访问到，所以多页面访问有限制
localStorage.setItem(name,value) 标准的存
localStorage[name]=value
localStorage.name=value
value=localStorage.getItem(name) 标准的读
value=localStorage[name]
value==localStorage.name
可枚举
for(var i=0;i<localStorage.length;i++){
var name=localStorage.key(i);
var value=localStorage.getItem(name);
}
for( var key in localStorage){
var name=key;
var value=localStorage.getItem(name);
}
删除一项 localStorage.removeItem(name);
删除全部 localStorage.clear();
window.addEventListener("storage",function(e){
console.log(e.key+"---"+ e.newValue+"---"+ e.oldValue+"----"+ e.url+"----"+ e.url+"---"+ e.domain+"----"+ e.storageArea)
},false)
触发条件：当存储数据真正发生改变的时候(含删除)
对象属性(e)：
key 被设置或者移除的项的名字 (clear 触发的时候 key=null)
newValue 保存该项的新值 (调用removeItem()时 该属性为null)
oldValue 改变或者删除该项前 保存该项原先的值 (当插入一个新项时该值为null)
url 触发该文档变化所在的url
需要注意的是 其保存的都是字符串 取值运用的时候 需要注意转换格式
localStorage 和存储事件都是采用的广播机制，浏览器会向目前正在访问同样站点的所有窗口发送消息(不会向本窗口发送，IE会向本窗口发送)
至于IE的UserDate 由于只能在IE上用 就不介绍了
IndexDb safari 不支持也不再介绍了
标签：
原文地址：http://www.cnblogs.com/ArthurXml/p/5405684.html
