html5 html5 本地儲存

2021-09-08 10:24:07 字數 1902 閱讀 9816

最近一直在學習 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 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以 localstorage 為例。早期我們都是使用 c...

html5 html5 本地儲存

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