localStorage和sessionStorage
实现了“Web存储”的浏览器在Window对象上定义了两个属性：localStorage和sessionStorage。这两个属性都代表同一个storage对象——一个持久化关联数组，使用字符串来索引，存储的值也都是字符串形式的。localStorage和sessionStorage两者的区别在于存储的有效期和作用域不同，以及谁拥有数据的访问权。
使用localStorage进行存储：
localStorage.x = 10; //在存储一个数字时，会自动把它转化成字符串
var x = parseInt(localStorage.x);//获取该值时别忘了类型的转化
//同样地，存储一个日期类型数据时也要进行编码和解码
localStorage.lastModify = (new Date()).toLocaleDateString();
var lastModify = new Date(Date.parse(localStorage.lastModify));
//使用JSON可以使基本数据类型的编码解码变得方便
localStorage.data = JSON.stringify(data)
var data = JSON.parse(localStorage.data)
存储有效期和作用域
localStorage存储的数据是永久性的，除非可以删除，否则会一直保留在电脑上。
localStorage的作用域是限定在文档源（document origin）级别的。文档源通过协议、主机名以及端口三者来确定。
sessionStorage存储的有效期与浏览器标签页是一致的，一旦标签页关闭，则数据也会被删除。
sessionStorage作用域也是文档源，但是还被限定在窗口中，如果同源的文档在不用的浏览器标签页中，那么他们间是无法共享数据的。
http://www.example.com
https://www.example.com
http:www.example.com:8000
这些都不是同源的
同源的文档间共享同样的localStorage。
存储API
localStorage.setItem("key",value)//存储一个数值，当然可以直接用.访问符存储和读取值
localStorage.getItem("key")//获取值
for(var i=0; i<localStorage.length; i++){
var name = localStorage.key(i)//获取第i对名字
var value = localStorage.getItem(name);
}
localStorage.removeItem("x")//删除
localStorage.clear("x")//全部删除
为什么最好使用setItem()和getItem()而不用点？
在将来，如果浏览器完全实现了“Web存储”标准，那像对象和数组类型的值通常都是可变的，因此存储对象要求存储他们的副本，以确保之后任何对这类对象的改变都不影响存储对象。同样的，在获取该对象的时候也要求获取的是该对象的副本，以确保对获取对象的改动不会影响到存储对象
localStorage.o = {x:1};//存储了一个对象
localStorage.o.x = 2;//试图修改值
localStorage.o.x//结果没变
//如果使用getItem()就不会这么让人困惑
localSotrage.getItem('o').x = 2
存储事件
在localStorage和sessionStorage的数据发生改变，浏览器会触发存储事件（但是只有其他可访问该数据的浏览器标签页会收到该事件，改变数据的当前页面是不会触发事件的）。在Window对象中有onstorage这个属性方法，使用方式跟onclick=function(event)一样。
在传入的事件对象中，有这5个重要的属性：
1.key 被设置或移除项的键名
2.newValue
3.oldValue
4.storageArea 显示是localStorage还是sessionStorage
5.url 触发该事件的脚本url
Cookie
cookie是指web浏览器存储的少量数据(最多不超过4KB)，并且会附带在每次的向服务器发起的HTTP请求中，通过Document对象的cookie属性可以实现cookie操作。
cookie的有效期跟作用域都是可调的，它默认的有效期跟sessionStorage一样，作用域跟localSotrage一样。
cookie使用：
//存储cooike
document.cookie = "lastModify="+encodeURIComponent(document.lastModified);
/*cookie的value字符串中不允许出现分号、逗号和空白符，因此存储前可以使用JS的
全局函数encodeURIComponent对值进行编码，相应的读取cookie值时需要使用
decodeURIComponent()进行解码。*/
//max-age属性设置cookie有效期，以秒为单位
document.cookie = "name="+value+";"+"max-age="+seconds;
//path属性设置cookie的作用域
document.cookie = ”path=/“ //表示该页面的cookie对同源的所有页面可见
//domain属性设置子域间共享
document.cookie = ”path=/;domain=.example.com" //则子域.example.com下的所有页面都能访问该cookie
//读取cookie
var cookie = document.cookie.split(/\;/);
网友评论