html5 本地儲存

2022-01-30 16:32:52 字數 1479 閱讀 6397

最近一直在學習 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:

"en

">"

p">

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...