html5 html5 本地儲存

最近一直在學習 html5，為了後期的移動專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤、屬性和方法，今天主要介紹下 html5 的本地儲存。

html5 提供了兩種在客戶端儲存資料的新方法：

兩個方法用法完全一樣，下面就以 localstorage 為例。

早期我們都是使用 cookie 來完成的，但是 cookie 不適合大量的資料儲存，也就是說它太小，只有 4k 的樣子，而且速度慢效率低。

那麼我們該如何新增資料呢？很簡單，就像給物件新增屬性一樣：

localstorage.pageloadcount = 1;

可以通過瀏覽器的控制台來檢視是否有儲存資料：

同樣讀取和修改資料也很方便：

console.log(localstorage.pageloadcount);    //
讀取localstorage.pageloadcount = 10;            //
修改console.log(localstorage.pageloadcount);    //
讀取

以下是結果：

當然 localstorage 本身自帶一些方法及屬性，具體如下：

localstorage.clear();                       //
清除所有的儲存資料
localstorage.getitem('pageloadcount');      //
讀取儲存資料，返回值 "10"，等同於 localstorage.pageloadcount
localstorage.key(0);                        //
獲取儲存資料的 key，返回值 "pageloadcount"
localstorage.length;                        //
獲取儲存資料的長度
localstorage.removeitem('pageloadcount');   //
刪除特定的儲存資料
localstorage.setitem('name','jack');        //
新增加乙個儲存資料，等同於 localstorage.name = 'jack';

需要注意的是：讀取儲存資料的時候，返回的是字串，無論之前存的是什麼，最後讀取的都是字串，所以讀取的時候需要進行型別轉換。

最後附上 localstorage 應用的 demo：

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
title
>localstorage
title
>
head
>
<
body
>
<
p id
="p"
>
p>
body
>
html
>
<
script
>
window.onload 
=function
()script
>

html5 html5 本地儲存

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

html5 html5 本地儲存

html5 html5 本地儲存

html5 html5 本地儲存

html5 html5 本地儲存

相關推薦