html5入门教程（三）storage-本地存储

查看方法

---

如何使用chrome查看本地储存的数据

优势：

---

大小最小5MB，可以申请更大的空间
不会随HTTP请求发送给服务器
非常容易操作
移动端普及高

概念：

---

localStorage
为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问。
按域名进行存储，不会和其他域名冲突

sessionStorage
为临时性保存数据，当页面关闭就会消失。其他一切与localStorage一样
不能跨页面访问，也不会触发跨标签页的storage事件。它只局限在当前的标签页

格式:
键值对存储：key/value

属性：
.length
获取localstorage一共有多少条数据
配合key（index）方法可以遍历localStorage数据的方法
这里的key（）是一个方法 不是下标

for(i=0;i<storage.length;i++){
    _this=storage.key(i);
    box.innerHTML+=storage.key(i)+":"+storage.getItem(storage.key(i))+"<a href='#' onclick=delitem('"+_this+"')>x</a>"+"<br/>"
}

方法：

---

保存或设置数据
setItem(key , value)
如果key已经存在，则覆盖key对应的value
如果不存在则添加key与value

获取key对应的value。
getItem(key);
如果key不存在则返回null

获取指定下标位置的key
key(index);

将同域名下的所有localStorage数据都清空
clear();

删除数据，通过key来删除相应的value
removeItem('key'):

storage是可以储存json格式内容，但是需要先转换为json字符串
如果希望存储在本地，可以直接调用 JSON.stringify()
将json对象转为json字符串
读取出来后调用 JSON.parse() 将json字符串转为json对象格式
如下所示：

if(window.localStorage){
   var storage=window.localStorage;
   var js={"name1":"小红","age":"13"};

   //设置storage 把json转成json字符串
   storage.setItem("json1",JSON.stringify(js))

   //获取storage 的json后再把字符串解析来用
   var date1=storage.getItem("json1");
   var jsonparse=eval("("+date1+")")
   alert(jsonparse.age);
}

事件：

---

storage事件：
当同源的localStorage或sessionStorage有更改以后，会触发这个事件。 必须用事件监听去绑定。需要绑定给window

事件

实战例子:

读取的页面：

/*读取红包加息券*/
$(function(){
    if(window.localStorage.json){
        var storage=window.localStorage;
        var date=storage.getItem("json");
        var jsonparse=eval("("+date+")");
        $("#jx-val").text(jsonparse.name);
        $("#jx-img").hide();
        page3show();
    }
})
/*提交后请清理localStorage*/
function clearLS(){
    window.localStorage.removeItem("json")
}
/*刷新清除*/
window.onbeforeunload =function(){
    clearLS();
}

设置的页面：

$("#coupon-box a").on("tap",function(){
    var userVal=$(this).find("input").val();
    if(window.localStorage){
        /*设置本地储蓄*/
        var storage=window.localStorage;
        var js={"name":userVal};
        storage.setItem("json",JSON.stringify(js));
        window.location.href="youName.html"; //设置好以后跳转
    }else{
        alert("设置失败！")
    }
})