LocalStorage

含义

• 在HTML5中,这个特性主要是用来作为本地存储来使用的。在localStorage下一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。
• localStorage只支持String类型的存储。

判断浏览器是否支持localStorage属性

if(!window.localStorage){
   alert("浏览器支持localstorage");
   return false;
 } else {
   // some code here...
 }

Localstorage的方法

1.添加新的数据到Localstorage中存储

localStorage.setItem(keyName, keyValue); 
            if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

2.返回指定keyName的Localstorage中存储的值

localStorage.getItem(keyName); 

3.从Localstorage中移除指定keyName的数据项

localStorage.removeItem(keyName); 

4.清除所有的本地Localstorage存储

localStorage.clear(); 

localStorage的优劣

1.优势

• localStorage拓展了cookie的4K限制，为前端数据存储提供了新的思路
• localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽

2.劣势

• 不同浏览器的存储大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
• localStorage的值类型限定为String类型，许多使用场景下会有限制
• localStorage在浏览器的隐私模式下面是不可读取的
• localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡