HTML5本地儲存之Web Storage

2021-09-23 15:15:13 字數 1700 閱讀 1269

web storage是html5

引入的乙個非常重要的功能,可以在客戶端本地儲存資料,類似html4的cookie,但可實現功能要比cookie強大的多,cookie大小被限制在4kb,webstorage官方建議為每個**5mb。

web storage又分為兩種:

sessionstorage

localstorage

從字面意思就可以很清楚的看出來,sessionstorage將資料儲存在session中,瀏覽器關閉也就沒了;而localstorage則一直將資料儲存在客戶端本地;

不管是sessionstorage,還是localstorage,可使用的api都相同,常用的有如下幾個(以localstorage為例):

·        儲存資料:localstorage.setitem(key,value);

·        讀取資料:localstorage.getitem(key);

·        刪除單個資料:localstorage.removeitem(key);

·        刪除所有資料:localstorage.clear();

·        得到某個索引的key:localstorage.key(index);

如上,key和value都必須為字串,換言之,web storage的api只能操作字串,對於js中常用的陣列或物件卻不能直接儲存。

但我們可以通過json物件提供的parse和stringify將其他資料型別轉化成字串,再儲存到storage中就可以了。請看下面的**。

var obj = ;

var str =json.stringify(obj);

//存入

localstorage.obj = str;

//讀取

str = localstorage.obj;

//重新轉換為物件

obj = json.parse(str);

localstorage語法很簡單,而且我們不需要考慮具體的實現機制:

1 window.localstorage.getitem( key );

2 window.localstorage.setitem( key, value );

3 window.localstorage.removeitem( key );

4 window.localstorage.clear();

5 window.localstorage.length;

6 window.localstorage.key( i );

上述五個方法和乙個屬性是最常用、也夠用的

localstorage

web storage這個東西真正好:量大、永久儲存、不用使用任何外掛程式,不隨http傳送 … 用來儲存一些使用者非敏感的狀態和資訊是再合適不過的了。其瀏覽器相容性如下:

可以看到,由於除ie外的其他瀏覽器很早的版本都支援了,關鍵是我們可以不用考慮這些瀏覽器的更低版本,所以基本上可以認為都已經支援了localstorage,而ie是個特例,雖然ie8就開始支援localstorage應該誇獎,但是其更低版本ie卻都不支援,令人氣餒的是,這些低版本瀏覽器在中國的占有率挺高…

將js 存入了localstorage。

HTML5本地儲存

align center html5本地儲存 align b 1.1概述 b html5 儲存是基於鍵值對的。資料儲存在乙個鍵裡,訪問資料時可以根據同樣的鍵獲得上次儲存的資料。鍵是乙個字串。而資料則可以是任何型別的js基本資料型別,包括字串,boolean,整數,和浮點數。需要注意的是,這些資料在儲...

html5 本地儲存

前言 最近在做專案時遇到了需要將資料儲存在使用者瀏覽器本地的需求,經過查詢了解到了web storage,通過學習初步掌握了web storage,以下是一些關於web storage的知識和用法,記憶力較差發布在csdn備忘。1 什麼是html5本地儲存?通過web storage web應用程式...

html5 本地儲存

最近一直在學習 html5,為了後期的專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以localstorage為例。早期我們都是使用cookie...