如何使用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);

}

巴特西

如何使用localStorage?

最新文章

热门文章