H5筆記1 本地儲存localStorage

在很久很久以前，客戶端儲存資訊用的都是cookie。但是cookie在儲存空間上，有一些限制。

瀏覽器cookie個數（每個網域名稱）

單個cookie容量限制

microsoft

50個4kb左右(包括name、value和等號)

firefox

50個4kb左右(包括name、value和等號)

opera

30個4kb左右(包括name、value和等號)

chrome

53個4kb左右(包括name、value和等號)

隨著時代的進步，localstorage誕生了！官方建議是每個網域名稱5mb，就存些字串，足夠了。比較詭異的是居然所有支援的瀏覽器目前都採用的5mb，儘管有一些瀏覽器可以讓使用者設定，但對於網頁製作者來說，目前的形勢就5mb來考慮是比較妥當的。

注意：localstorage儲存的資訊，只能是字串格式的。

1，判斷瀏覽器是否支援localstorage:

if(window.localstorage)
else

2，儲存資料的方法：

localstorage.a = 3;//設定a為"3"
var a2 = localstorage.a;//獲取a的值
localstorage["a"] = "sfsf";//設定a為"sfsf"，覆蓋上面的值
var a1 = localstorage["a"];//獲取a的值
localstorage.setitem("b","isaac");//設定b為"isaac"
var b = localstorage.getitem("b");//獲取b的值
localstorage.removeitem("c");//清除c的值
localstorage.clear();//一次性清除所有的鍵值對
//查詢某個網域名稱下有哪些key
var storage = window.localstorage;
function
showstorage
()}

注意：在iphone/ipad上有時設定setitem()時會出現詭異的quota_exceeded_err錯誤，這時一般在setitem之前，先removeitem()就ok了。

通常情況是，每個網域名稱對應乙個儲存檔案，檔案大小最大一般為5m.有的瀏覽器支援擴充套件空間，有的則直接報錯！

html5的本地儲存，還提供了乙個storage事件，可以對鍵值對的改變進行監聽，使用方法如下：

if(window.addeventlistener)else
if(window.attachevent)
function handle_storage(e)
//showstorage();
}

對於事件變數e，是乙個storageevent物件，提供了一些實用的屬性，可以很好的觀察鍵值對的變化，但是瀏覽器不同，該物件的屬性也會不同。屬性舉例： key、oldvalue、newvalue、url/uri。

（1）localstorage的儲存容量比cookie更大；

（2）cookie作為http規範的一部分，它的主要作用是與伺服器進行互動，使http保持連線狀態。也就是說每次你請求乙個新的頁面的時候，cookie都會被傳送過去，這樣也會無形中浪費了頻寬；

localstorage僅僅是為了在本地「儲存」資料而生；

（3）cookie儲存時可以指定能訪問該cookie的範圍，預設情況下,如果在某個頁面建立了乙個cookie,那麼這個頁面所在目錄中的其他頁面也可以訪問這個cookie.如果這個目錄下還有子目錄,則在子目錄中也可以訪問。

如果要使cookie在當前整個**下可用,可以將cookie_dir指定為根目錄,例如：document.cookie=」userid=320;path=/」;

localstorage的儲存範圍就是當前整個**，不存在指定訪問範圍這一說。

兩者都不支援跨域呼叫；

html5中的web storage包括了兩種儲存方式：sessionstorage和localstorage。

sessionstorage用於本地儲存乙個會話（session）中的資料，這些資料只有在同乙個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionstorage不是一種持久化的本地儲存，僅僅是會話級別的儲存。

而localstorage用於持久化的本地儲存，除非主動刪除資料，否則資料是永遠不會過期的。

H5筆記1 本地儲存localStorage

h5本地儲存

h5 本地儲存

H5本地儲存

H5筆記1 本地儲存localStorage

h5本地儲存

h5 本地儲存

H5本地儲存

相關推薦