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