如何使用localStorage?

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

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

　　localStorage的写法有三种方法，分别是：

if(!window.localStorage) {
    alert("浏览器不支持localStorage");
}else{
  var storage = window.localStorage;

//写入a字段    方法一的写法
  storage["a"] = 1


// 写入b字段   方法二的写法    

storage.b = 2;

//写入c字段   这个方法是官方推荐使用的 

storage.setItem("c",3) ;

console.log(typeof storage["a"]);

console.log(typeof storage["b"]);

console.log(typeof storage["c"]);

}

 

　　

注意：

localStorage的使用也是遵循同源策略，不同的网站是不能直接共用相同的localStorage的

 最后在控制台上面打印出来的结果是:

 

不知道各位读者有没有注意到，刚刚存储进去的是int类型，但是打印出来却是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

 

 locaStorage的读取

 

if(!window.localStorage){
        alert("浏览器不支持localStorage");
    }else{
        var storage = window.localStorage;
        // 写入a字段
        storage["a"] = 1;
        // 写入b字段
        storage.b = 2;
        // 写入c字段
        storage.setItem("c",3);
        console.log(typeof storage["a"]);
        console.log(typeof storage["b"]);
        console.log(typeof storage["c"]);
        // 第一种读取方法
        var a = storage.a;
        console.log(a);
        // 第二种读取方法
        var b = storage["b"];
        console.log(b);
        // 第三种读取方法
        var c = storage.getItem("c");//官方推荐使用
        console.log(c);
    }

　　

localStorage的删、改这两个步骤

改的方法其实很简单，相当于直接赋值

if(!window.localStorage){
    alert("浏览器不支持localStorage");
}else{
    var storage = window.localStorage;
    // 写入a字段
    storage["a"] = 1;
    // 写入b字段
    storage.b = 2;
    // 写入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    /*console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);*/
    // 相当于直接赋值
    storage.a = 4;
    console.log(storage.a);   // 4
}

　　删除的方法有两种情况，

1.将localStorage的所有内容清楚

var storage = window.localStorage;
    storage.a = 1;
    storage.setItem("c",3);
    console.log(storage);//Storage {a: "1", c: "3", length: 2}
    storage.clear();//删除方法
    console.log(storage);//Storage {length: 0}

　　

2.将localStorage中的某个键值对删除

 

var storage = window.localStorage;
    storage.a = 1;
    storage.setItem("c",3);
    console.log(storage);//Storage {a: "1", c: "3", length: 2}
    storage.removeItem("a");//删除方法
    console.log(storage);//Storage {c: "3", length: 1}

　　

loaclStorage的键获取

使用key()方法，向storage的数组中通过索引获取键值对的值

var storage = window.localStorage;
storage.a = 1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key = storage.key(i);
    console.log(key);
}

　　

四、loaclStorage的类型转化事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将其转换成string类型

使用JSON.stringify()方法将JSON转换为JSON字符串

 

if(!window.localStorage){
    alert("浏览器不支持localStorage");
}else{
    var storage = window.localStorage;
    var data = {
        username:"lisi",
        password:"123456"
    };
    // JSON转化为字符串
    var b = JSON.stringify(data);
    // 写入到localStorage中
    storage.setItem("data",b);
    console.log(storage.data);
}

　　

使用JSON.parseIn()方法，将读取之后的JSON字符串转化成JSON对象的形式

if(!window.localStorage){
    alert("浏览器不支持localStorage");
}else{
    var storage = window.localStorage;
    var data = {
        username:"lisi",
        password:"123456"
    };
    // JSON转化为字符串
    var b = JSON.stringify(data);
    // 写入到localStorage中
    storage.setItem("data",b);
    console.log(storage.data);
    // 将JSON字符串转化成JSON对象
    var json = storage.getItem("data");
    var jsonObj = JSON.parse(json);
    console.log(typeof jsonObj);
}