Web储存

东抄西拼

1、两种方法

• localStorage-存储的数据没有时间限制。两天、两周或者两年数据依然可以使用
• sectionStorage-针对一个session的数据存储（当浏览器关闭，数据会被清除）

2、与cookie作对比

        cookie不适合大量数据的存储，因为它们由每个服务器的请求来传递，这使得cookie速度很慢而且效率也不高

localStorage使用方法

localStorage.length  返回现在已经存储的变量数目

localStorage.key(n) 返回第N个变量的键值(key)

localStorage.getItem(key) 和localStorage.key一样，取得键值为key的变量的值

localStorage.setItem(key,val) 和localStorage.key=val 一样，设置键值key的变量值

localStorage.removeItem(key) 删除键值为key的变量

localStorage.clear() 清空所有变量

localStorage.a = 7; //设置a为"3"

localStorage["a"]="sfsf"; //设置a为"sfsf"，覆盖上面的值

localStorage.setItem("b","isaac"); //设置b为"isaac"

var a1 = localStorage["a"]; //获取a的值

var a2 = localStorage.a; //获取a的值

var b = localStorage.getItem("b"); //获取b的值

localStorage.removeItem("c"); //清楚c的值

JSON.stringify() 存储在本地，调用JSON.stringify()将其转为字符串

JSON.parse()  读取出来后调用JSON.parse()将字符串转为json格式

   var details = {author:"isaac","description":"fresheggs","rating":100};

    storage.setItem("details",JSON.stringify(details));

    details = JSON.parse(strong.getItem("details"));

HTML5本地存储只能存字符串，任何格式存储的时候都会自动转为字符串，所以读取时候需要自己进行类型的转换。可以通过JSON.parse/JSON.stringify结合使用

测试浏览器是否支持localStorage

<script>
        if(window.localStorage){
           alert('This browser supports localStorage');
        }else{
            alert('This browser does NOT support localStorage');
        }
    </script>

页面计数

<script>
function draw2(){
            if(localStorage.pagecount){
                localStorage.pagecount = Number(localStorage.pagecount)+1;
            }else{
                localStorage.pagecount =1;
            }
            document.write("Visits:"+localStorage.pagecount+"time(s)");
        }
</script>

页面read and write

<script>
if(localStorage.a){
                txt1.value = localStorage.a;
            }
            if(localStorage.f){
                sty.value =localStorage.f;
            }
            btn1.οnclick=function(){
                localStorage.a = txt1.value;
                localStorage.f = sty.value;
            }
</script>