HTML5本地儲存

2022-06-08 10:15:09 字數 1659 閱讀 9648

***********************************===

h5本地儲存

***********************************===

http和https協議是無狀態的

cookie

容量4kb

方法比較單一 只有set和get

跨域的問題

瀏覽器可以禁用cookie

cookie存在於前後端

storage

容量5mb

不會出現跨域問題

ie8或之前的版本不支援storage

storage只存在於客戶端,使用js操作

1.localstorage

2.sessionstorage

api一樣

生命週期不一樣

localstorage,永久儲存,存在客戶端(檔案方式)

sessionstorage,和會話的生命週期一致

客戶端cookie

靈活不安全、儲存量有限(4kb)、可以被禁用

概念:使用html5可以在本地儲存使用者的瀏覽資料。

早些時候,本地儲存使用的是 cookie。但是web儲存需要更加的安全與快速。

這些資料不會被儲存在伺服器,只用於使用者請求**資料情況。

可以儲存大量的資料,而不影響**的效能。

資料以 鍵/值 對存在,web**的資料只允許該網頁訪問使用。

★★★★不能跨域

只能儲存string型別,如果需要儲存物件,推薦使用json

key:string

value:object

一、storage

1.本地儲存器

2.會話儲存器(屬於本地儲存器)

區別:localstorage 和 sessionstorage 生命週期不同

localstorage永久有效

sessionstorage跟會話有關

實際開發中發現跟會話沒有關係

當瀏覽器關閉之後,失效

因為h5新特性,在操作之前,需要判斷瀏覽器是否支援storage

市面上只ie8-版本不支援

if(!window.storage)else

if(window.storage)else

儲存資料:(官方推薦使用第三種)

1.localstorage.屬性名=值;

2.localstorage[屬性名]=值;

3.localstorage.setitem(屬性名,值);

取出資料:(官方推薦使用第三種)

//null 表示可能沒有該變數;也可能表示變數有,但值是null

1.var value=localstorage.屬性名;

2.var value=localstorage[屬性名];

3.var value=localstorage.getitem(屬性名);

屬性:localstorage.length 表示本地共儲存了多少個變數

通過下標得到屬性名(key):

var key=localstorage.key(下標);

移除指定的變數:

localstorage.removeitem(屬性名);

清除:localstorage.clear();

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