cookie：存储数据，当用户访问了某个网站（网页）的时候，我们就可以通过cookie向来访问者电脑存储数据
- 不同的浏览器存放的cookie位置不一样，也是不能通用的
- cookie的存储是以域名的形式进行区分的
- cookie的数据可以设置名字
- 一个域名下存放的cookie的个数是有限制的，不同的浏览器存放的个数不一样
- 每个cookie存放的内容大小也是有限制的，不同的浏览器存放大小不一样
我们通过documen.cookie来获取当前网站下的cookie的时候，得到的是字符串形式的值，它包含了当前网站下所有的cookie，它会把所有的cookie通过一个分号+空格的形式串联起来
如果我们想要长时间存放一个cookie。需要在设置这个cookie的时候同时给它设置一个过期的时间
cookie默认是临时存储的，当浏览器关闭进程的时候自动销毁
Cookie的特点：
- 存储限制： —域名100个cookie，每组值大小4KB
- 客户端、服务器端，都会请求服务器（头信息）
- 页面间的cookie是共享的（同一个浏览器下的）
下面是cookie的存取和删除的封装函数
//获取cookie
function getCookie(key){
var arr = document.cookie.split("; ");
for(var i=0; i<arr.length;i++){
var arr2 = arr[i].split("=");
if(arr2[0]==key){
return decodeURI(arr2[1])
}
}
}
//设置cookie
function setCookie(key,value,t){
var oDate = new Date();
oDate.setDate(oDate.getDate()+t);
document.cookie = key + '='+value+';expries ='+oDate.toGMTString();
}
//删除cookie
function removeCookie(key){
setCookie(key,-1)
}
storage
.sessionStorage
—session临时会话，从页面打开到页面关闭的时间段
—窗口的临时存储，页面关闭，本地存储消失
.localStorage
—永久存储（可以手动删除数据）
storage的特点
- 存储量限制（5M）
- 客户端完成，不会请求服务器处理
- sessionStorage数据是不共享、localSorage共享
Storage API
.setItem():
- 设置数据，key/value类型，类型都是字符串
- 可以用获取属性的形式操作
.getItem():
- 获取数据，通过Key来删除相应的value
.removeItem():
- 删除数据，通过key来删除相应的value
.clear():
- 删除全部存储的值
存储事件：
- 当数据有修改或删除的情况下，就会触发storage事件
- 在对数据进行改变的窗口对象上是不会触发的
- key：修改或删除的key值，如果调用clear()，key为null
- newValue：新设置的值，如果调用removeStorage()，key为null
- oldValue：调用改变前的value值
- storageArea:当前的storage对象
- url：触发该脚本变化的文档的url
注：session同窗口才可以：例如iframe操作
看一个小例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
for(var i=0;i<aInput.length;i++){
aInput[i].onclick = function(){
if(this.checked){
window.localStorage.setItem('sel',this.value);
}
else{
window.localStorage.setItem('onSel',this.value);
}
};
}
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
if( ev.key == 'sel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = true;
}
}
}
else if( ev.key == 'onSel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = false;
}
}
}
},false);
};
</script>
</head>
<body>
<input type="checkbox" value="香蕉" />香蕉<br />
<input type="checkbox" value="苹果" />苹果<br />
<input type="checkbox" value="西瓜" />西瓜<br />
<input type="checkbox" value="哈密瓜" />哈密瓜<br />
</body>
</html>