实战：HTML5 LocalStorage 本地存储

什么是localStorage

localStorage 是HTML5新加入的一个特性，主要用作本地存储，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

localStorage用法

1. 判断浏览器是否支持localStorage

   if(!window.localStorage){
       alert("啊啊,您的浏览器localStorage，请换一个吧 = =");
   }

    

2. 保存数据

   三种不同的写法

   var ls = window.localStorage;
   // 第一种
   ls.setItem("hello","hello,I like you!");  
   // 第二种
   ls.hello="hello,I like you too!";
   // 第三种
   ls["hello"]="hello,I like you too too!";

    

3. 读取数据

   对应的也是三种不同写法，紧接着上面语句：

   //第一种方法读取
   var hello_a = storage.hello;
   console.log(hello_a );
   //第二种方法读取
   var hello_b = storage["hello"];
   console.log(hello_b );
   //第三种方法读取
   var hello_c =storage.getItem("c");
   console.log(hello_c );

    

4. 修改数据

   修改数据就是保存数据，通过保存数据直接覆盖之前的数据，以达到修改的效果。

5. 删除数据

   可以删除单个key，或者删除所有的key

   // 删除 hello 这个key
   localStorage.removeItem("hello");
   // 删除所有的key 慎用！
   window.localStorage.clear();

    

其他小技巧

1. localstorage 设置过期时间

   因为localstorage 没有设置过期时间的api，所以我们可以在localstorage 里面单独存储一个key的过期时间，再用到key之前，先读取一下key的过期时间来判断。

2. localstorage 存储 json 格式

   可以使用JSON.stringify(data) 把目标数据转换成JSON格式的数据，之后存储到 localstorage 中，之后将 json字符串转换成为 JSON 对象，可以使用 JSON.parse(json)。

实战：使用localStorage记录投票

投票JS 代码片段：

function doVote(){
    var selectValue = $('input:radio:checked').val();
    if(selectValue != undefined){
        if(!window.localStorage){
            alert("啊啊,您的浏览器不支持投票，请换一个吧 = =");
        }
        if(window.localStorage.getItem("isDoVote")){
            alert("您已经投过票了，不能再投票了哦");
        }else{
            $.ajax({  
                type: 'POST',  
                url: "vote/doVote.do",  
                data: {"targerName":selectValue},  
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',  
                success: function(data){  
                        window.localStorage.setItem("isDoVote",selectValue);
                        alert("投票成功,我们已经记录了您的选择,感谢您的支持。");
                        success(data);
                },  
                error: function() {  
                    alert("投票失败！");  
                },  
                dataType: 'json'  
            }) ;
        }
    }else{
        alert("请先选择一个您喜欢的投票选项");
    }
}

 

清除投票限制JS代码：

function clearVote(){
    window.localStorage.removeItem("isDoVote");
    alert("清除成功");
}

 

localStorage总结

1. localStorage 主要用作本地存储
2. localStorage 保存的数据没有过期时间
3. localStorage 的值类型被限定为string类型
4. localStorage 属性是只读的，在浏览器的隐私模式下面是不可读取的
5. localStorage 不能被爬虫抓取到
6. localStorage 与 sessionStorage 的唯一区别就是localStorage属于永久性存储，而sessionStorage属于会话级别，回话结束的时候sessionStorage中的键值对会被自动清空