美文网首页前端
react 之 web存储 localStorage

react 之 web存储 localStorage

作者: 走走婷婷1215 | 来源:发表于2017-03-01 11:54 被阅读3940次

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

    优点:拓展了 cookie 的 4k 限制, 可以将第一次请求的数据直接存储到本地,但只有在高版本的浏览器中才支持。

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

    1、使用前先判断浏览器是否支持 localStorage 这个属性

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

    2、localStorage 写入的三种方法(localStorage 只支持 string 类型的存储)

    var storage=window.localStorage;
         // 1、写入a字段
         storage[“a”] = 1;
         // 2
         storage.a = 1;
         // 3
         storage.setItem(“a”, 3);
    

    3、localStorage 读取的三种方法

    // 1
         var a = storage.a;
         // 2
         var a = storage[“a”];
         // 3
         var a = storage.getItem(“a”);
    

    官方推荐 getItem/setItem 这两种方法进行存取

    4、localStorage 更改

    storage[“a”] = 1;
    storage.a=4;
    

    a 的值就直接被改变了

    5、localStorage 删除

    // 全部清除
         storage.clear();
         // 某个键值对删除
         storage.removeItem(“a”);
    

    6、localStorage 键获取

    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);
                }
    

    7、注意事项
    当我们将 json 存入到 localStorage 中时,localStorage 会自动将 localStorage 转换为字符串形式,我们需要用 JSON.stringify() 方法,将 JSON 转换为 JSON 字符串

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

    相关文章

      网友评论

        本文标题:react 之 web存储 localStorage

        本文链接:https://www.haomeiwen.com/subject/vzyqgttx.html