08 HTML5 本地儲存

2021-10-10 21:04:54 字數 2075 閱讀 6456

資料儲存到計算機中,通過瀏覽器控制新增與刪除資料
- 儲存限制: 乙個網域名稱cookie數是有限的(根據瀏覽器而定),每個4kb;

- cookie會包含在每個http請求中向伺服器傳送,這回導致多次傳送重複資料;

- cookie在網路傳輸時並未加密,也可能會有安全隱患;

- 頁面間的cookie是共享的;

使用storage儲存key-value時,key、value都只能是字串(如果有複雜資料,可以將結構化資料封裝成json,再將json物件轉為字串儲存)。

- session臨時會話,從頁面開啟到頁面關閉的時間段;

- 視窗的臨時促成了,頁面關閉,本地儲存消失;

- 永久儲存(可以手動刪除資料)
- 儲存量限制(5m);

- 客戶端完成,不會請求伺服器處理;

- sessionstorage資料是不共享、localstorage共享

- 設定資料,key/value型別,型別都是字串;

- 可以用獲取屬性的形式操作;

window.sessionstorage.setitem('name', otext.value);

window.localstorage.setitem('name', otext.value);

- 獲取資料,通過key來獲取到對對應的value;

window.sessionstorage.getitem('name')

window.localstorage.getitem('name')

- 刪除資料,通過key來刪除對應的value;

window.sessionstorage.removeitem('name');

window.localstorage.removeitem('name');

- 刪除全部儲存的值;

window.sessionstorage.clear();

window.localstorage.clear();

案例: 儲存註冊資訊(第一次沒填寫完關閉,當第二次開啟時,之前填寫的內容還是存在的)

// 當視窗關閉時觸發window.onunload = function(){}

- 當有資料修改或刪除的情況下,就會觸發storage事件

- 在對資料進行改變的視窗物件是不會觸發的

- key: 修改或刪除的key,如果呼叫clear(),key為null

- newvalue: 新設定的值,如果呼叫removestorage(),key為null

- oldvalue: 呼叫改變前的value值

- storagearea: 當前的storage物件

- url: 觸發該指令碼變化的文件的url

- sessionstorage在同視窗下才可以,例如iframe操作就是同視窗的操作;

// 新增storage事件(本視窗不觸發,在其他視窗觸發)

window.addeventlistener('storage', function(ev));

案例: 同步購物車(不管哪個頁面操作了,但都是同步的)

1、localstorage, sessionstorage(字串鍵值對在本地儲存資料,方便靈活,但是對於大量結構化資料儲存力不從心)

2、indexeddb (瀏覽器中持久地儲存結構化資料的資料庫)

3、web sql(已經被廢棄)

之前會使用cookies,每次的http請求頭中,都會帶有cookies——缺點;每個網域名稱只能儲存4k大小的cookies;主網域名稱汙染: 如果我們使用cookies儲存主網域名稱的東西,那麼子網域名稱下得http請求都會帶上主網域名稱的東西;如果關聯上網路,那麼將帶來安全問題。

所以,通常我們會使用cookies用在如購物車、身份驗證等問題上。

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