關於localstorage儲存JSON對象的問題

標籤：ons   nbsp   對象   pre   cal   技術   tag   ring   div   

如果你嘗試用LocalStorage儲存Object，卻意外發現取出來以後不是你想要的，例如：

儲存一個對象，並將對象的name屬性的值給P標籤。

HTML：

　　<p></p>

 

JS：

　　var fruit={        name:‘apple‘,        color:‘red‘,        taste:‘sweet‘    }    localStorage.myfruit=fruit;    console.log(localStorage.myfruit);    document.getElementsByTagName(‘p‘)[0].innerHTML=localStorage.myfruit.name;

結果：

這時你會發現name的值取不出來。因此需要我們在存取Object的時候，額外進行一些操作，如下：

JS：

　　var fruit={
　　　　name:‘apple‘,
　　　　color:‘red‘,
　　　　taste:‘sweet‘
　　}

　　localStorage.myfruit=JSON.stringify(fruit);//將物件類型轉成字串類型儲存
　　console.log(localStorage.myfruit);

　　var obj=JSON.parse(localStorage.myfruit);//將字串重新解析成JSON對象
　　document.getElementsByTagName(‘p‘)[0].innerHTML=obj.name;

 

結果：

 

 

結論：

　　在使用LocalStorage進行儲存時需要先使用JSON.stringify()方法將Object轉換成String，然後儲存。

　　在取值時需要使用JSON.parse()方法將String轉回Object。

關於localstorage儲存JSON對象的問題