localStorage 本地存储具体使用方法

localStorage

localStorage是一个很好的前端数据存储方式，以键值对的方式存储，也方便取值赋值，下面说一说它的特征和使用方法。

1、特征：

生命周期是永久的，但是数据实际是存在浏览器的文件夹下，可能卸载浏览器就会删除。

兼容IE8以上浏览器。

有长度限制，5M左右，不同浏览器大小会有不同。

只能存储字符串类型，需要转成字符串存储。

2、使用localStorage的时候，判断浏览器是否支持localStorage这个属性

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

3、存值和取值共有3种方式，localStorage相当于window对象下面的一个属性，所以有[]和.调用，但也具有自身的setItem方法（存值）和getItem方法（取值）

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

4、修改值和删除值，修改值就是相当于给对应的key重新赋值，就会把原来的值覆盖掉，删除值可以通过对象删除属性的关键字delete，也可以用自身的方法removeItem

//修改值
localStorage.setItem("name","TOM");// 自身方法
localStorage["name"]="TOM";// []方法
localStorage.name="TOM";// .方法
//删除值
localStorage.removeItem("name");
delete localStorage["name"];
delete localStorage.name

5、获取localStorage所有的key和值

// 通过使用key()方法，向其中出入索引即可获取对应的键
for (var i=0;i<localStorage.length;i++) {
    console.log(localStorage.key(i));
}
// 通过for in 循环获取
for(var key in localStorage){
    console.log(key);
}
localStorage.valueOf();//取出所有的值
localStorage.clear();//清除所有的值

6、判断localStorage是否具有某个key，用hasOwnProperty方法

localStorage.hasOwnProperty("name");  // 如果存在的话返回true，不存在返回false

7、localStorage储存json类型数据：可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串；读取之后将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var jsonObj={
    name:'zhangsan',
    sex:'man',
    age:24
};//定义json类型数据
var storage = window.localStorage;
var jsonStr = JSON.stringify(jsonObj);//把json类型数据转换为json字符串
storage.setItem('zhangSanData',jsonStr);
console.log(tepeof storage.zhangSanData);//string

var jsonStrx = storage.zhangSanData;
var jsonObjx = JSON.parse(jsonStrx);/把json字符串装换为json对象
console.log(jsonObjx);

localStorage 本地存储具体使用方法

localStorage

猜你喜欢