客户端存储

web存储

何为web存储呢？往往潜意识会想到这种问题。解释为：web应用允许使用浏览器提供的API实现将数据存储到用户的电脑上，这种客服端存储相当于赋予了web浏览器记忆功能。

web存储标准所描述的API包含localstorage对象和sessionStorage对象，该对象是一个持久化关联数组（即名值对映射表，“名”和“值”都是字符串），数组使用字符串来索引，存储的值也都是字符串形式的。

其localStorage和sessionStorage俩者的区别在于存储的有效期和作用域不同，其区别如下：

tips：1 、有效期：数据阔以存储多长时间；2、作用域：谁拥有数据的访问权。

localStorage的有效期

通过该对象存储的数据是永久的，除非web应用程序或用户刻意删除。

sessionStorage的有效期

它是会话级别的，它的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是一样的。一旦窗口或标签页被永久的关闭了，那么所有通过sessionStorage存储的数据也都被删除了。（注意：现代所有主流浏览器基本都具备了重新打开最近关闭的标签页的功能，因此这些标签页与之相关的sessionStorage的有效期也会延长）

localStorage的作用域

localStorage的作用域限制在文档源（即协议、主机名、端口）级别的。同源的文档间共享同样的localStorage数据。它们阔以相互读取对方的数据，甚至阔以覆盖对方的数据

。但是，非同源文档间不能互相读取或者覆盖对方的数据。

它的作用域也受浏览器供应商限制，如你用ie访问站点，那么下次用另一个浏览器（chrome）再次访问的时候，那么不会获取上次存储的数据的。

sessionStorage作用域

与localStorage一样，sessionStorage的作用域也是限定在文档源中，因此非同源文档间也无法共享sessionStorage数据的，不仅如此，sessionStorage的作用域还被限定在窗口中，即如果同源的文档渲染在不同的浏览器标签页中，那么他们互相之间拥有的是各自的sessionStorage数据，无法共享。注意的是：这里提到的基于窗口作用域的sessionStorage指的窗口只是顶级窗口。

eg. 使用通过设置localStorage或sessionStorage对象的属性来存储字符串值，查询该属性来读取该值

var name=localStorage.username;//查询一个存储的值name=localStorage["username"];//等价于数组表示法if(!name){    name=prompt("what is your name?"); //询问用户一个问题    localStorage.username=name;// 存储用户的答案}//迭代所有存储的name/value对for(var name in localStorage){  //迭代所有存储的名字    var value=localStorage[name];//查询每个名字对应的值}

eg. localStorage和sessionStorage这俩个对象还提供了更加正式的API。如下：

getItem():将对应的名字和值传递进去，阔以实现数据存储

getItem(): 将名字传递进去，阔以获取对应的值

removeItem(): 将名字传递进去，阔以删除对应的数据

clear(): 此方法不需要参数，阔以删除所有的存储的数据

localStorage.setItem("x",1);//以"x"的名字存储一个数值localStorage.getItem("x");//获取数值//枚举所有存储的名字/值对for(var i=0;i<localStorage.length;i++){    var name=localStorage.key(i);//获取第i对的名字    var value=localStorage.getItem("name");//获取该对的值}localStorage.removeItem("x");//删除"x"项localStorage.clear(); //全部删除

存储事件

无论什么时候存储在localStorage或者sessionStorage的数据发生改变，浏览器都会在其他对该数据可见的窗口对象上触发存储事件。为存储事件注册处理程序可以通过addEventListener()或者ie的attachEvent()方法。与存储事件相关的对象有5个非常重要的属性：

1：key、被设置或者移除的项的名字或者键名。

2：newValue、保存该项的新值。

3：oldvalue、改变或者删除该项前，保存该项原先的值。

4：storageArea、这个属性值就好比是目标window对象上的localStorage属性或者是SessionStorage属性。

5：url、触发该存储变化脚本所在文档的URL。

cookie

一段简洁活概括cookie了，1：在客户端提供了非常繁琐的javascript的API来操作cookie，使其难用至极，并且只适合存储少量的文本数据。2：任何以cookie形式存储的数据，不论服务器是否需要，每一次HTTP请求都会把这些数据传输到服务器端，因此服务端脚本就阔以读写存储在客户端的cookie的值。3：由于cookie是一种早期的客户端存储机制，起初是针对服务端脚本设计使用的，所以它也有一个优点，即所有新老浏览器都支持它。

检查浏览器cookie是否启用，通过检测navigator.cookieEnabled这个属性实现。

cookie的有效期和作用域：

有效期：cookie默认的有效期很短暂；它只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就会丢失了。如果想要延长cookie的有效期，阔以通过设置max-age属性，但是必须要明确告诉浏览器cookie的有效期是多长。一旦设置了有效期，浏览器就会将cookie数据存储在一个文件中，并且直到过了指定的有效期才会删除该文件。

作用域：cookie的作用域是通过文档源和文档路径来确定的。该作用域可通过cookie的path和domain属性是可配置的。例如，默认情况下，cookie和创建它的web页面有关，并对该web页面以及和该web页面同目录或者子目录的其他web页面可见，其也满足了最常见的需求。eg.web页面 http://www.example.com/catalog/index.html页面创建了一个cookie，其默认path是“/catalog”，那么cookie对http://www.example.com/catalog/order.html页面和http://www.example.com/catalog/widgets/index.html页面都是可见的，但它对http://www.example.com/about.html页面是不可见。如果将路径设置成''/",那么该cookie对任何http://www.example.com这台web服务器的页面都是可见的。将cookie路径设置成'/'等于是让cookie和localStorage拥有同样的作域。

cookie的作用域默认由文档源限制。但是，如果有的大型网站想要子域之间能够相互共享cookie。比如，order.example.com域下的服务器想要读取catalog.example.com域下设置的cookie的值。这个时候就需要通过设置cookie的domain属性来达到目的。如果catalog.example.com域下的一个页面创建了一个cookie，并将其path属性设置成“/”，其domain属性设置成“.example.com”，那么该cookie就对所有catalog.example.com、orders.example.com以及任何其他example.com域下的任何其他服务器都可见。 

操作cookie的API很早就已经定义和实现了，因此该API的兼容性很好。但根本没用提供诸如查询、设置、删除cookie的方法，故该API形同虚设。通过客户端脚本如何通过使用Document对象的cookie属性对cookie的操作。

设置cookie的有效期：按照如下的字符串形式设置cookie属性即可                                                                                                                                                                                                  name=value; max-age=seconds

下面的函数用来设置一个cookie的值，同时提供一个可选的max-age属性：

//以名/值的形式存储cookie//同时采用encodeURIComponent()函数进行编码，来转义分号、逗号和空白符//如果daysTolive是一个数字，设置max-age属性为该数值表示cookie直到指定的天数//到了才会过期。如果daysToLive是0就表示删除cookiefunction setcookie(name,value,daysToLive){    var cookie=name+"="+encodeURIComponent(value);    if(typeof daysToLive ==="number")        cookie +="";max-age=""+ (daysToLive*60*60*24);    document.cookie=cookie;}

同样地，如果要设置cookie的path、domain和secure属性，只须在存储cookie值前，以如下字符串形式追加在cookie值的后面：

;path=path;domain=domain;secure

读取cookie，定义了一个getcookie()函数，该函数将document.cookie属性的值解析出来，将对应的名/值对存储到一个对象中，函数最后返回该对象。

//将document.cookie的值以名/值对组成的一个对象返回//假设存储cookie的值的时候是采用encodeURIComponent()函数编码的function getcookie(){    var cookie={};//初始化最后要返回的对象    var all=document.cookie;//在一个大写字符串中获取所有的cookie值    if(all ==="")      //如果该cookie的属性值为空字符串        return cookie; //返回一个空对象    var list=all.split(";");  //分离出名/值对    for(var i=0; i<list.length;i++){//遍历每个cookie      var cookie=list[1];      var p=cookie.indeOf("=");  //查找第一个“=”符号      var name=cookie.substring(0,p);  //获取cookie名字      var value=cookie.substring(p+1);   //获取cookie对应的值      value=decodeURIComponent(value);   //对其值进行解码      cookie[name]=value;                //将名/值对存储到对象中    }    return cookie;}

IE userData

userData即微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制，可与web存储搭配，解决早期IE版本的兼容问题。总的来说，userData阔以实现一定量的字符串数据存储。存储数据的大小来对比一下，阔能形象一点的，userData允许存储的数据量要比cookie大，但是却比localStorage以及sessionStorage允许存储的数据量要小，嗯，就是这样。

一旦给元素赋予了“userData”行为，该元素就拥有load（）和save（）方法。

load()方法用于载入存储的数据。使用它的时候必须传递一个字符串作为参数，该参数用来指定要载入的存储数据。

getAttribute()方法用来查询这些数据，根据这些名/值对形式的数据。

setAttribute()方法设置属性。

save（）方法阔以存储新的数据。

removeAttribute（）方法，删除数据，然后调用save（）方法。

eg.

var memory=document.createElement("div"); //创建一个元素memory.id="_memory";memory.style.display="none"; //将其隐藏memory.style.behavior="url('#defaule#userData')"; //附加userData行为document.body.appendChild(memory);  //将其添加到document元素中

eg.

memory.load("myStoredData");   //根据指定名，载入对应的数据var name=memory.getAttribute("username");   //获取其中的数据片段if(!name){                         //如果没有指定的数据片段name=prompt("what is your name?");   //获取用户输入memory.setAttribute("username",name);   //将其设置成memory元素的一个属性memory.save("myStoredData");            //保存它方便下次使用

默认情况下，通过userData存储的数据，除非手动去删除它否则永不失效。但是，也是阔以通过设置expires属性来指定它的过期时间。就拿上列说，阔以给存储的数据设置时长100达天的有效期，如下所示：

var now=(new Data()).getTime;  //获取当前时间var expires=now + 100*24*60*60*1000; //距离当前时间100天，把天换成秒expires=new Data(expires).toUTCString();//将其转化成字符串memory.expires=expires;//设置userData的过期时间

以上根据犀牛书学习总结归类，若理解错了，请大神多多送送吐槽句。