本地存储之cookie和storage

它们都是保存在客户端中的文件，保存的格式都是字符串

cookie

1、cookie可能被禁用，当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能
2、发送http请求时会把cookie放在请求头中，服务器通过cookie来了解客户端状态
3、大小限制4k左右，低版本浏览器会有数量的限制
4、可以设置有效时间，超过时间就会消失
5、安全性不够高，所有的cookie都是以纯文本形式记录与文件中，因此保存用户名和密码等重要信息最好事先加密处理
6、有路径的概念，可以限制cookie在某个路径下
7、在同源窗口中都是共享的
8、cookie是与浏览器相关的，即使是同一个页面，不同浏览器之间所保存cookie的也不能相互访问的
9、每个cookie都是硬盘上的一个文件，因此很可能被用户删除

设置cookie:

 document.cookie = "name=aimi; age=20;"  /* 存储多个名/值对，用分号加空格（; ）隔开 */

在cookie的名/值中不能使用分号、逗号、等号以及空格。
在cookie的名中做到很容易，但在保存的值中是不确定的，所以用escape()函数进行编码，它能将一些特殊符号使用十六进制表示，例如空格将会编码为“20%”，从而可以存储cookie值中，而且使用此种方案还可以避免中文乱码的出现。在取出值后用unescape()进行解码就可以得到原来保存的值。

获取cookie:

var strCookie = document.cookie;

一次获取所有的cookie值，而不能指定cookie名称来获取值，这正是处理cookie值最麻烦的地方，需要通过截取字符串循环遍历出某个名称对应的值。

设置保存有效期：

没有设置时间的cookie都是单会话，当浏览器关闭后将会丢失，事实上这些cookie仅存储在内存中，而没有建立相应的硬盘文件。
格式：document.cookie = "name=value; expiress=GMT_String"; /* GMT_String 是以GMT格式表示的时间字符串

var expiresDays = 30; /* 30天之后过期 */
var data = new Date().getTime()+expiresDays*24*3600*1000；
document.cookie = "name=aimi; expires=" + date.toGMTString(); 

删除cookie:

为了删除一个cookie，可以将其过期时间设定为一个过去的时间。

var date=new Date();  //获取当前时间
date.setTime(date.getTime()-10000);  //将date设置为过去的时间
document.cookie="userId=828; expires="+date.toGMTString(); //将userId这个cookie删除

指定cookie可访问的路径：

默认情况下，如果在某个页面创建一个cookie,那么该页面所在目录中的其他页面也可以访问该cookie,如果这个目录下还有子目录，则在子目录中也可以访问。例如在www.xxxx.com/html/a.html中所创建的cookie，可以被www.xxxx.com/html/b.html或 www.xxx.com/ html/ some/c.html所访问，但不能被www.xxxx.com/d.html访问。
为了控制cookie可访问的目录，需要使用path参数设置cookie,
doment.cookie = "name=value; path=cookieDir"; 其中cookieDir表示可访问cookie的目录。例如：document.cookie="userId=320; path=/shop";就表示当前cookie仅能在shop目录下使用。
如果要使cookie在整个网站下可用，可以将cookie_dir指定为根目录，例如：

指定可访问cookie的主机名：

和 路径类似，主机名是指同一个域下的不同主机，例如：www.google.com和gmail.google.com就是两个不同的主机名。默认情况下， 一个主机中创建的cookie在另一个主机下是不能被访问的，但可以通过domain参数来实现对其的控制，其语法格式为：

document.cookie="name=value; domain=cookieDomain";

以google为例，要实现跨主机访问，可以写为：

document.cookie="name=value;domain=.google.com";

这样，所有google.com下的主机都可以访问该cookie。
备注：cookie是引自阿伟~博客

localStorage

1、永久保存，可以手动删除
2、客户端保存，不会请求服务器
3、在所有同源窗口中是共享的

sessionStorage

1、临时会话，从页面打开到页面关闭的时间段窗口的临时存储，页面关闭，本地存储消失
2、存储限制5M
3、客户端保存，不会请求服务器
4、即是同一个页面，在不同的浏览器窗口中不能共享；

localStorage和sessionStorage操作

setItem存储value

sessionStorage.setItem("key","vaule");
localStorage.setItem("key","vaule")

getItem获取value

sessionStorage.getItem("key");
localStorage.getItem("key")

removeItem删除key

sessionStorage.removeItem("key","vaule");
localStorage.removeItem("key","vaule")

clear清楚所有的key/value

sessionStorage.clear();
localStorage.clear();

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

varstorage=window.localStorage;storage.key1="hello";storage["key2"]="world";console.log(storage.key1);console.log(storage["key2"]);

localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：

varstorage=window.localStorage;for(vari=0,len=storage.length;i<len; i++) { var key=storage.key(i); var value=storage.getItem(key); console.log(key+"="+value); }

###storage事件
storage还提供了storage事件，当键值改变或者clear的时候，就可以触发storage事件，如下面的代码就添加了一个storage事件改变的监听：

if(window.addEventListener){window.addEventListener("storage",handle_storage,false);}elseif(window.attachEvent){window.attachEvent("onstorage",handle_storage);}functionhandle_storage(e){if(!e){e=window.event;}}