HTML5中localStorage增删改查使用总结

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

localStorage的优势

1、localStorage拓展了cookie的4K限制

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的

localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

首先在使用localStorage的时候，我们需要判断浏览器是否支持localStorage这个属性

if(！window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    //主逻辑业务
}

if(！window.localStorage){

alert("浏览器不支持localstorage");

return false;

}else{

//主逻辑业务

}

localStorage写入三种方式
var storage=window.localStorage;
storage[“a”]=1;
storage.a=1;
storage.setItem(“c”,3); （官方推荐）
删除
将localStorage的所有内容清除 storage.clear();
将localStorage中的某个键值对删除 storage.removeItem(“a”);

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

if(!window.localStorage){
    alert("浏览器不支持localstorage");
}else{
    var storage=window.localStorage;
    var data={
        name:'sam',
        sex:'man',
        hobby:'program'
    };
    var d=JSON.stringify(data);
    storage.setItem("data",d);
    console.log(storage.data);
}

if(!window.localStorage){

alert("浏览器不支持localstorage");

}else{

var storage=window.localStorage;

var data={

name:'sam',

sex:'man',

hobby:'program'

};

var d=JSON.stringify(data);

storage.setItem("data",d);

console.log(storage.data);

}

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
var data={
    name:'sam',
    sex:'man',
    hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

var storage=window.localStorage;

var data={

name:'sam',

sex:'man',

hobby:'program'

};

var d=JSON.stringify(data);

storage.setItem("data",d);

//将JSON字符串转换成为JSON对象输出

var json=storage.getItem("data");

var jsonObj=JSON.parse(json);

console.log(typeof jsonObj);

另一个代理使用localstorage的例子

//代理关闭配置
var closeConfig = {
    mode: "direct"
}

window.localStorage['proxyConfig'] = JSON.stringify(closeConfig);

if (window.localStorage['proxyConfig'] !== undefined){
    var result = JSON.parse(window.localStorage['proxyConfig']);
    if(result.mode == "direct"){
        $('#div1').attr("class","close1");
        $('#div2').attr("class","close2");
    }
}

//代理关闭配置

var closeConfig = {

mode: "direct"

}

window.localStorage['proxyConfig'] = JSON.stringify(closeConfig);

if (window.localStorage['proxyConfig'] !== undefined){

var result = JSON.parse(window.localStorage['proxyConfig']);

if(result.mode == "direct"){

$('#div1').attr("class","close1");

$('#div2').attr("class","close2");

}

再来一个

<script type="text/javascript">
(function(){
/*判断浏览器是否支持该特性*/
if(!window.localStorage){
    alert("浏览器不支持localstorage");
    return false;
}else{
    /*可以简单模拟成前端的数据库，实现增删改查的功能*/
    //增，即给全局变量赋值
    var storage = window.localStorage;
    storage.a = 1;
    storage["b"] = 2;
    storage.setItem("data","i am jsonData"); 

    //查，取得变量的值
    var data = storage.getItem("data");
    console.log(data);

    //删，移除存储里的值
    //storage.clear()清空所有
    storage.removeItem("a");

    //改，即重新给变量赋值
    storage.setItem("b","again data"); 

}
})()
</script>