javaScript存储
《1》
1.document对象提供了的cookie
2.Window对象提供了sessionStorage和localStorage两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
console.log(typeof(Storage) !== "undefined") //检测浏览器是否支持Storage存储
《2》三种数据存储方式，分别是：
1.cookie
a.主流浏览器都支持
b.存储于访问者的计算机中的变量;
c.每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie
d.注意测试需要在浏览器中服务请求才起作用,直接浏览器打开静态文件不起作用
2.sessionStorage
《IE8以上》 《会话存储》 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
3.localStorage
《IE8以上》 《本地存储》 用于《长久保存整个网站》的数据，保存的数据《没有过期时间》，直到手动去除
《3》简单例子理解
1.cookie
设置cookie的形式："cookieName1=cookie1^cookieName2=cookie2;expires=" + date
cookie有一个关键字是expires，它是用来设置cookie的有效期的，默认情况（不设置expires）是当浏览器关闭的时候，自动清除cookie。
注意设置多个cookie不要用“;”隔开,用 “^” 如上
删除cookie
把cookie的expires设置到过去(1970年1月1号) cookie就过期了
修改cookie
如document.cookie = "password=123;expires=" + date.toGMTString();
再次请求遇到已经定义过的cookie（username）,浏览器会自己修改原来储存的值;如果没有定义过,浏览器则会创建一个新的cookie。
<html>
<head>
<script type="text/javascript">
//检查是否已设置 cookie
function getCookie(c_name){
//document.cookie 对象存有某些 cookie
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
//检查指定的 cookie 是否已储存
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
//创建一个可在 cookie 变量中存储访问者姓名的函数(cookie 的名称、值以及过期天数)
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
//如果 cookie 已设置，则显示欢迎词，否则显示提示框来要求用户输入名字。
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!=""){
alert('Welcome again '+username+'!')
}else {
username=prompt('Please enter your name:',"")
if (username!=null && username!=""){
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
2.sessionStorage 和 localStorage
对象属性：
length : 返回存储对象中包含多少条数据。
对象方法：
key(n) 返回存储对象中第 n 个键的名称
getItem(keyname) 返回指定键的值
setItem(keyname, value) 添加键和值，如果对应的值存在，则更新该键对应的值。
removeItem(keyname) 移除键
clear() 清除存储对象中所有的键
例子：
localStorage.setItem("a",JSON.stringify({name:"xusanduo",token:"abcd123"}));
var local = localStorage.getItem("a");
console.log(JSON.parse(local))
sessionStorage.setItem("session","sessionXusanduo")
console.log(sessionStorage)
《4》联系与区别：
相同点：都保存在浏览器端，同源的
不同点：
1.传递方式不同
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2.数据大小不同
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.数据有效期不同
cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
4.作用域不同
cookie也是在所有同源窗口中都是共享的。
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
localStorage 在所有同源窗口中都是共享的；
Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。
Web Storage 的 api 接口使用更方便。
