它们都是保存在客户端中的文件,保存的格式都是字符串
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;}}