web客戶端存儲技術筆記

客戶端存儲的相關技術有

• localStorage 鍵-值對存儲，綁定到某個域，並存儲瀏覽器會話數據；

• sessionStorage 鍵-值對存儲，綁定到某個域，會話結束時會刪除；

• IndexedDB 由一個瀏覽器內建的對象存儲器，來存儲跨會話數據；

• WebSQLDatabases 一個完整的關係型數據庫，能夠做爲IndexedDB的替代方案；

• menifest 經過聲明menifest文件，來讓客戶端存儲離線文件。

localStorage的用法示例

• 保存
  localStorage.setItem(「background_color」,$(「#background_color」).val())

• 獲取
  var bgcolor = localStorage.getItem(「background_color」)

• 模擬使用場景
  設置用戶個性化樣式，經過表單選擇CSS值後，將其發送給服務器的同時設置localStorage。在頁面加載的時候，將localStorage的值取出，將樣式經過DOM操做應用到界面上。

sessionStorage的用法示例

會話結束時刪除數據，則能夠採用這種方法。

• 保存
  sessionStorage.setItem(‘name’,’Brian Hogan’)

• 取出
  var name = sessionStorage.getItem(‘name’)

IndexedDB用法

操做和數據庫相似，它的主要特色是請求後由事件異步執行。首先和相應數據庫發送鏈接請求，請求成功後執行增刪改查等操做。
《HTML5和CSS3實例教程》上內容較老，具體參考火狐開發者文檔：
https://developer.mozilla.org...

離線應用的實現

建立一個manifest文件，裏面包含web 應用客戶端文件（HTML、CSS、JS文件），當用戶第一次訪問HTML主頁時，menifest所標註的全部文件都會下載到客戶端。manifest文件必須經過 text/cache-manifest 的MiME類型來提供給用戶。