localstorage

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();//删除所有

}

};