學(xué)習(xí)導(dǎo)讀

隨著互聯(lián)網(wǎng)的快速發(fā)展撇眯，基于網(wǎng)頁的應(yīng)用越來越普遍，同時也變得越來越復(fù)雜虱咧，為了滿足各種各樣的需求熊榛，會經(jīng)常性在本地存儲大量的數(shù)據(jù)，html5規(guī)范提出了相關(guān)解決方案腕巡。

學(xué)習(xí)目標(biāo)

• 能夠?qū)懗鰏essionStorage數(shù)據(jù)的存儲以及獲取
• 能夠?qū)懗鰈ocalStorage數(shù)據(jù)的存儲以及獲取
• 能夠說出他們兩者的區(qū)別

本地存儲特性

1. 數(shù)據(jù)存儲在用戶瀏覽器中
2. 設(shè)置,讀取方便玄坦，甚至頁面刷新不丟失數(shù)據(jù)
3. 容量較大，sessionStorage約5M，localSotrage約20M
4. 只能存儲字符串煎楣，可以將對象JSON.stringify()編碼后存儲

window.sessionStorage

1. 生命周期為關(guān)閉瀏覽器窗口
2. 在同一個窗口（頁面）下數(shù)據(jù)可以共享
3. 以鍵值對的形式存儲使用

• 存儲數(shù)據(jù)

sessionStorage.setItem(key,item);

• 獲取數(shù)據(jù)

sessionStorage.getItem(key);

• 刪除數(shù)據(jù)

sessionStorage.removeItem(key);

• 刪除所有數(shù)據(jù)

sessionStorage.clear();

案例

HTML部分

<input type="text">
<button class="set">存儲數(shù)據(jù)</button>
<button class="get">獲取數(shù)據(jù)</button>
<button class="remove">刪除數(shù)據(jù)</button>
<button class="del">清空所有數(shù)據(jù)</button>

JS部分

var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');

set.addEventListener('click',function () {
    //當(dāng)我們點(diǎn)擊了之后豺总，就可以把變單里面的值存儲起來
    var val = ipt.value;
    sessionStorage.setItem("uname",val);
    sessionStorage.setItem("psw",val);
});

get.addEventListener('click',function () {
    // 當(dāng)我們點(diǎn)擊了之后，就可以把表單里的值獲取過來
    console.log(sessionStorage.getItem('uname'));
});

remove.addEventListener('click',function () {
    // 當(dāng)我們點(diǎn)擊了之后择懂，就可以把表單里的值刪除了
    console.log(sessionStorage.removeItem('uname'));
});

del.addEventListener('click',function () {
    // 當(dāng)我們點(diǎn)擊了之后喻喳，就可以把表單里的值全部刪除
    console.log(sessionStorage.clear());
});

window.localStorage

1. 生命周期永久生效，除非手動刪除否則關(guān)閉頁面也會存在
2. 可以多窗口（頁面）共享（同一瀏覽器可以共享）
3. 以鍵值對的形式存儲使用

• 存儲數(shù)據(jù)

localStorage.setItem(key,item);

• 獲取數(shù)據(jù)

localStorage.getItem(key);

• 刪除數(shù)據(jù)

localStorage.removeItem(key);

• 刪除所有數(shù)據(jù)

localStorage.clear();

案例

HTML部分

<input type="text">
<button class="set">存儲數(shù)據(jù)</button>
<button class="get">獲取數(shù)據(jù)</button>
<button class="remove">刪除數(shù)據(jù)</button>
<button class="del">清空所有數(shù)據(jù)</button>

JS部分

var ipt = document.querySelector('input');
var set = document.querySelector('.set');
var get = document.querySelector('.get');
var remove = document.querySelector('.remove');
var del = document.querySelector('.del');

set.addEventListener('click',function () {
    //當(dāng)我們點(diǎn)擊了之后困曙，就可以把變單里面的值存儲起來
    var val = ipt.value;
    localStorage.setItem("uname",val);
    localStorage.setItem("psw",val);
});

get.addEventListener('click',function () {
    // 當(dāng)我們點(diǎn)擊了之后表伦，就可以把表單里的值獲取過來
    console.log(localStorage.getItem('uname'));
});

remove.addEventListener('click',function () {
    // 當(dāng)我們點(diǎn)擊了之后，就可以把表單里的值刪除了
    console.log(localStorage.removeItem('uname'));
});

del.addEventListener('click',function () {
    // 當(dāng)我們點(diǎn)擊了之后慷丽，就可以把表單里的值全部刪除
    console.log(localStorage.clear());
});

效果查看：打開F12 > Application

image.png