JSON数据的缓存

前端有时候会遇到JSON数据的缓存，后台给我们JSON数据是一个对象，直接缓存起来它存的是字符串 "[object Object]"。这是因为在缓存时会隐式调用toString方法来转为字符串，而JSON对象是普通对象用toString转换之后就变成了字符串"[object Object]",普通对象的原型上的 Object.prototype.toString方法不是转换为字符串的,而是用来检测数据类型的 )。因此缓存的时候不能直接存，需要用JSON.stringify(result)把JSON对象转成字符串，取的时候再转成对象。

缓存时会隐式调用toString方法转为字符串：

<script>
        //缓存时会隐式调用toString方法
        //实例一：
        var data={
            name:'xh'
        }
        console.log(typeof data);//object  类型
        sessionStorage.setItem('data',data);
        var result=sessionStorage.getItem("data");
        console.log(typeof result);//string类型


        //实例二：
        sessionStorage.setItem('num',1);//存的是number类型
        console.log(typeof sessionStorage.getItem('num'));//取出来是string类型
        
        
</script>

直接缓存时：

var data={
                "name":"这是缓存"
          };
            
             sessionStorage.setItem("data",data);
             var result=sessionStorage.getItem("data");
             console.log(result) // 结果 [object Object]

JSON有二个方法 JSON.stringify(result)和JSON.parse(result)。

JSON.stringify(result) JSON对象转成字符串（官方：将一个JavaScript值(对象或者数组)转换为一个 JSON字符串）

JSON.parse(result) JSON字符串转换成对象（官方：解析JSON字符串，构造由字符串描述的JavaScript值或对象）

存储时用JSON.stringify(result)把JSON对象转成字符串

var data={
                "name":"这是缓存"
            };
            sessionStorage.setItem("data",JSON.stringify(data)); 

             var result=sessionStorage.getItem("data");
             console.log(result,result.name) // 结果  {"name":"这是缓存"} undefined   这是一个字符串不是JSON对象无法取出name

取缓存时，再用JSON.parse(result) 把JSON字符串转换成对象现在就可以取得对象的属性了

var data={
                "name":"这是缓存"
            };
            sessionStorage.setItem("data",JSON.stringify(data)); 
             var result=JSON.parse(sessionStorage.getItem("data"));//转成JSON对象                    
             console.log(result,result.name) // 结果  Object { name: "这是缓存" } 这是缓存

JSON数据的缓存

推荐阅读