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

2021-06-01 01:18:27 字數 1640 閱讀 6669

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的本地儲存
1.首先談談html5的本地儲存支援問題，見下圖 這張圖很好的詮釋了支援問題 我要做的手機微博主要需要支援ios和android自帶的手機瀏覽器，ios支援的很好。android我測試了下，附上js 檢驗是否支援html5本地儲存 如果可以顯示 sessionstorage aaaa 的話表示支援。...

				
html5手機瀏覽器
html5特性 特性2 地理位置服務 通過向瀏覽器請求，獲取gps wifi熱點等方式定位使用者當前地理位置。特性3 離線運用 使web程式也能像客戶端程式般在無網路情況下執行部分功能。html5新特性中其實還有很多比如語義化標籤 新表單元素 communication api web worker...

				
HTML5手機APP開發入 4
完成乙個自定義的component用來展現通訊錄使用者的明細資訊如下圖 涉及的知識點 component的定義，輸入 輸出 html 從 複製過來 使用關鍵字component，selector對應html tag，angular2 定義乙個component比angular 1要簡單的多 修改 d...