一手機微博之HTML5的本地儲存

1.首先談談html5的本地儲存支援問題，見下圖（這張圖很好的詮釋了支援問題）

我要做的手機微博主要需要支援ios和android自帶的手機瀏覽器，ios支援的很好。android我測試了下，附上js**檢驗是否支援html5本地儲存 ,如果可以顯示「sessionstorage:aaaa」的話表示支援。

結果發現，android作業系統的只有android2.1及其以上的版本自帶的瀏覽器才能很好的支援html5本地儲存。

2.localstorage與sessionstorage的區別

localstorage的資料是頁面共享的，但有些情況，我們需要乙個瀏覽器中的不同頁面可以單獨操作自己的資料。這時我們就可以用sessionstorage了，它儲存的資料只有當前頁面可以訪問。

1> localstorage

首先判斷是否支援localstorage，附上**

function getlocalstorage() catch(e) }

儲存資料

var db = getlocalstorage(); if(db)

localstorage可以新增事件監聽函式，如果對應的有變化的話，就可以監測得到。以下兩個檔案可以看到效果（init.html、change.html）

init.html 該檔案用來初始化localstorage並監測變化，**如下：

change.html 用來改變init.html中的localstorage的值，**如下：

aaa

這樣，每次local storage裡面的資料變化時，瀏覽器裡面的資料就會自動變化了，因為storage事件被監聽後，瀏覽器就會時時監視local storage裡的資料，如果變化，就會觸發事件，修改頁面。不管幾個頁面都會做出相應的修改。

要注意一點，這個事件只有在同乙個瀏覽器程式裡面才有效（比如你不能在chrome和firefox各開啟乙個頁面，然後等著事件生效），因為不同瀏覽器的sqlite檔案不一樣，各自修改自己的資料，當然不會對其它瀏覽器的資料造成影響。

經過上面的介紹，大家可以看出，忽略事件的內容外，localstorage的操作其實也很簡單，和cookie一樣很容易操作。

2>sessionstorage

首先判斷下支不支援sessionstorage，**如下

function getsessionstorage() catch(e) }

儲存資料

var db = getsessionstorage(); if(db) //和localstorage一樣的操作然後開啟瀏覽器，同時開啟兩個網頁做測試，

發現只有在同乙個視窗才會一直保留，就連乙個瀏覽器下的兩個標籤sessionstorage都不共用。

3>除了以上兩種儲存方式外，還有websql , indexeddb兩種儲存方式，因為這次專案用不到，暫不做介紹。可參考文章：

（畢）

一 手機微博之HTML5的本地儲存