localStorage
sessionStorage
cookie： 只能存储4KB 浪费流量，每次会随着HTTP请求发送给服务器 操作数据很繁琐，没有方便的API
HTML5 本地存储的优点： 最小5MB，可以申请更大的空间 不会随HTTP请求发送给服务器 有方便的API操作 移动端普及高 有localStorage与sessionStorage两种
支持性检测
if(window.localStorage){
//支持本地存储
}
localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问。 按域名进行存储，不会和其他域名冲突 键值对存储：key/value
setItem(key , value)，保存或设置数据 如果key已经存在，则覆盖key对应的value 如果不存在则添加key与value
localStorage.setItem("name","小明");
getItem(key); 获取key对应的value。 如果key不存在则返回null
alert(localStorage.getItem("name")) //"小明"
alert(localStorage.getItem("abc")) //"null"
key(index); 获取指定下标位置的key
alert(window.localStorage.key(0)); //data
key value
data {"name","小明"}
length 获取localStorage一共有多少条数据
alert(window.localStorage.length);
配合key(index)方法可以实现遍历localStorage数据的方法
clear(); 将同域名下的所有localStorage数据都清空
removeItem('key'): 删除数据，通过key来删除相应的value
storage事件：当同源的localStorage或sessionStorage有更改以后，其他窗口会触发这个事件。
例：event.key event.newValue .....
sessionStorage为临时性保存数据，当页面关闭就会消失。其他一切与localStorage一样 sessionStorage不能跨页面访问，也不会触发跨标签页的storage事件。它只局限在当前的标签页
目前javascript使用非常多的json格式 如果希望存储在本地，可以直接调用 JSON.stringify() 将json对象转为json字符串 读取出来后调用 JSON.parse() 将json字符串转为json对象格式 如下所示：
var storage=window.localStorage;
var json={"name1":"jack","name2":"lily"};
storage.setItem("name",JSON.stringify(json));
json = JSON.parse(storage.getItem("name"));
cook
测试
var box=document.getElementById('box');
var box2=document.getElementById('box2');
document.cookie='laowang=38岁';
document.cookie='laoliu=28岁';
document.cookie='laowang2=18岁';
// box.innerHTML=document.cookie;
var str='2:4:6:8';
// box.innerHTML=str.split(':'); //['2','4','6','8']
var dates=new Date();
dates.setDate(dates.getDate()+7);
document.cookie='user=123456; expires='+dates;
function setCookie(key,value,days){//设置cookie
var dates=new Date();
dates.setDate(dates.getDate()+days);
document.cookie=key+'='+escape(value)+'; expires='+dates;
}
setCookie('user2','2@2#2你哈根*2',30);
box.innerHTML=document.cookie;
//laowang=38岁; laoliu=28岁; laowang2=18岁
var arr=unescape(document.cookie).split('; ');
/*arr=['laowang=38岁','laoliu=28岁','laowang2=18岁']
var arr2=arr[0].split('='); -> arr2=['laowang','38岁']
var arr3=arr[1].split('='); -> arr3=['laoliu','28岁']
box2.innerHTML=arr2[1];
box2.innerHTML=arr3[1];*/
测试
删除
var btn=document.getElementById('btn');
if (window.localStorage) {
var storage=window.localStorage;
storage.setItem('name1','老王');//设置
storage.setItem('name2','小王');//设置
storage.setItem('name1','中王');//修改
// alert(storage.getItem('name1'));//老王
// alert(storage.getItem('name3'));//null
// alert(storage.key(0));//name1
// alert(storage.length);//2
for (var i = 0; i < storage.length; i++) {
console.log(storage.key(i));
};
btn.onclick=function (){
// storage.removeItem('name2');//删除单个
storage.clear();//删除所有
}
};
