HTML5 : Web Storage API

Web Storage

Web Storage 提供了两个API localStorage 和 sessionStorage

对比cookie 、localStorage 和 sessionStorage

存储方式：键值对的方式存储字符串
存储的数据类型：可以序列化成字符串的内容（如：数组、图片、json、样式、脚本）
复制代码

 var json = {
    "name" : "jch",
    "age" : "27"
}
localStorage.name = 'animee';
localStorage.info = JSON.stringify({name:'kiwi',age:'28'});
localStorage.bf = JSON.stringify(json);
    //JSON.stringify()用于将json对象转为字符串序列
sessionStorage.sex = 'female';
//取出
localStorage.name;
JSON.parse(localStorage.bf).name
    //JSON.parse用于从一个字符串中解析出json对象
复制代码

方法

1.setItem(name,val)设置属性值
2.getItem(name)获取属性值
3.removeItem(name)移除属性
4.clear()清除属性
复制代码

localStorage和sessionStorage

localStorage.getItem('name');
localStorage.setItem('a','b'); 
localStorage.removeItem('a');
localStorage.clear()
复制代码

localStorage过期策略

function set(key, value){
    //获取当前时间
    var curtime = new Date().getTime();
    localStirage.setItem(key, JSON.stringify({val:value, time:curtime}));
}
//设置过期时间exp
function get(key ,exp){
    //获取存储的元素
    var val = localStorage.getItem(key);
    var dataObj = JSON.parse(val);
    //判断：【当前时间】-【创建数据存储时设置的时间】 > 【过期时间】
    if(new Date().getTime() - dataObj.time > exp){
        console.log("expires");
    }else{
        console.log("val="+dataObj.val);
    }
}
复制代码

应用：客户登录、购物车记录、游戏存档