HTML5－localstorage的介紹與JSON.parse、JSON.stringify方法的使用

localstorage是HTML5的新功能之一，其捨棄了以往的緩存存儲方式，使用本地的一個空間來存放所需要存放的數據。

在我們的phonegap項目里有一個功能是顯示最近搜索過的數據並且能供用戶使用，即在我退出程序後，在下一次打開程序時能看到上一次使用程序時所搜索過的內容，而這時我就使用了localstorage的功能。

    if(!JSON.parse(localStorage.getItem('recentSearchStorage'))){

        var recentSearchStorage = {

            'recentSearch':

            [

             {   

             'localStorageData1' : "",

             'localStorageData2': "",

             'localStorageData3' : "",

             }

    ]

}

localStorage.setItem('recentSearchStorage', JSON.stringify(recentSearchStorage));

    }else{

        var recentSearchObject = JSON.parse(localStorage.getItem('recentSearchStorage'));

這是在onDeviceReady()的方法，就是說第一次啓動程序時是沒有的我們的東西在localstorage里的，所以我們要在裡面放自己數據所對應的key值，這裡的value保留空。

在以後的動作里可以使用localStorage.setItem來對這個storage來作更改。

這些都是很簡單的內容，而筆者覺得比較重要的是JSON.parse跟JSON.stringify這兩個方法的使用。

我們打開瀏覽器後，可以打開development tool里的local storage來查看當前頁面的local storage內容，而我們純粹的setItem和getItem是看不到裡面的內容，而看到的只是一個object，因此我們要使用JSON.parse跟JSON.stringify這兩個方法來轉換我們保存的數據，一般我們放進去是以字符串形式放進去，這樣便於觀察，而取出來時我們一般以JSON對象來取，這樣便於對它操作，所以localStorage.setItem('recentSearchStorage', JSON.stringify(recentSearchStorage)); 就是把我們要存的東西轉化為字符串存進去localstorage， var recentSearchObject = JSON.parse(localStorage.getItem('recentSearchStorage'));就是把裡面的數據轉化為對象來取出來。

轉載請注明出處 作者：SamFung