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: "這是緩存" } 這是緩存