react 之 web存储 localStorage

在 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() 方法