html5的web存儲(五)

          web存儲,能讓你在html5的開發過程中,將數據存儲到本地計算機中。此時必須將web存儲和cookie區分開來。

(一)web存儲和cookie的區別

        Cookie的大小是受限的(4K以內),並且每次你請求一個新的頁面的時候cookie都會被髮送過去,這將產生很多不必要的操作。HTML5的storage是存儲在你的計算機上,網站在頁面加載完畢後可以通過Javascript來獲取這些數據。html5上能存儲的容量也很大。

       總結出web存儲的一些特性:

       1. 存儲空間更大:IE8下每個獨立的存儲空間爲10M,其他瀏覽器實現略有不同,但都比Cookie要大很多。

       2. 存儲內容不會發送到服務器:當設置了Cookie後,Cookie的內容會隨着請求一併發送的服務器,這對於本地存儲的數據是一種帶寬浪費。而  Web Storage中的數據則僅僅是存在本地,不會與服務器發生任何交互。

       3. 更多豐富易用的接口:Web Storage提供了一套更爲豐富的接口,使得數據操作更爲簡便。

       4. 獨立的存儲空間:每個域(包括子域)有獨立的存儲空間,各個存儲空間是完全獨立的,因此不會造成數據混亂


(二)web存儲之sessionSStorage

       sessionStorage用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。

       關閉瀏覽器(或標籤頁)後數據就不存在了。但刷新頁面或使用“前進”、“後退按鈕”後sessionStorage仍然存在。每個窗口的值都是獨立的(每個窗口都有自己的數據),它的數據會隨着窗口的關閉而消失,窗口間的sessionStorage也是不可以共享的。

       用!!window.sessionStorage;來檢測是否有session存儲


(三)web存儲之localStorage

        local storage把只把數據存儲在了客戶端使用,不會發送的服務器上(除非你故意這樣做)。而且對於某一個域下來說,local storage是共享的(多個窗口共享一個“數據庫”)。localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

       SessionStorage與LocalStorage他們都擁有相同的方法(常用有如下4個,更多信息可參考HTML5 APP):

1、setItem(key, value)

2、getItem(key)

3、removeItem(key)

4、clear()
 

(四)web存儲之DatabaseStorage

       其實就是sqlite數據庫,在js中可以像java在本地調用mysql數據庫一樣的方便,可以自己創建數據庫,自己建表,自己往裏面增刪改數據。

第一步還是要判斷一下瀏覽器是否支持.

發佈了29 篇原創文章 · 獲贊 1 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章