快捷導(dǎo)航

JavaScript本地?cái)?shù)據(jù)存儲(chǔ)sessionStorage與localStorage使用詳解

更新時(shí)間：2022年10月24日 09:48:18 作者：YinJie…

這篇文章主要介紹了JavaScript本地?cái)?shù)據(jù)存儲(chǔ)sessionStorage與localStorage使用，localStorage：永久存儲(chǔ)在本地，適合保存在本地的數(shù)據(jù)。sessionStorage：會(huì)話級(jí)的存儲(chǔ)，敏感帳號(hào)一次登陸

本地存儲(chǔ)特性

數(shù)據(jù)存儲(chǔ)在用戶瀏覽器中
設(shè)置、讀取方便、甚至頁(yè)面刷新不丟失數(shù)據(jù)
容量較大, sessionStorage約5M、localStorage約20M .
只能存儲(chǔ)字符串,可以將對(duì)象JSON.stringify()編碼后存儲(chǔ)

window.sessionStorage

特點(diǎn)

生命周期為關(guān)閉瀏覽器窗口
在同一個(gè)窗口(頁(yè)面)下數(shù)據(jù)可以共享
以鍵值對(duì)的形式存儲(chǔ)使用

使用

存儲(chǔ)數(shù)據(jù)：

sessionStorage.setItem(key,value)

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

sessionStorage.getItem(key)

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

sessionStorage.removeItem(key)

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

sessionStorage.clear()

在瀏覽器里點(diǎn)擊這個(gè)按鈕點(diǎn)Application就能看到我們存儲(chǔ)的數(shù)據(jù)

就存儲(chǔ)在Storage下，sessionStorage與localStorage存儲(chǔ)的數(shù)據(jù)是分開(kāi)的

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <button class="set">存儲(chǔ)數(shù)據(jù)</button>
    <button class="get">獲取數(shù)據(jù)</button>
    <button class="remove">刪除數(shù)據(jù)</button>
    <button class="del">清空所有數(shù)據(jù)</button>
    <script>
        console.log(localStorage.getItem('username'));
        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)擊了之后，就可以把表單里面的值存儲(chǔ)起來(lái)
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 當(dāng)我們點(diǎn)擊了之后，就可以把表單里面的值獲取過(guò)來(lái)
            console.log(sessionStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

        });
        del.addEventListener('click', function() {
            // 當(dāng)我們點(diǎn)擊了之后，清除所有的
            sessionStorage.clear();
        });
    </script>
</body>
</html>

但我們單擊第一個(gè)存儲(chǔ)數(shù)據(jù)的按鈕后，我們輸入的數(shù)據(jù)‘ wwww '會(huì)被存儲(chǔ)在變量 val 里，然后通過(guò)鍵值對(duì)的形式存儲(chǔ)到瀏覽器里，我們可以在右邊的Application看到存儲(chǔ)的鍵值對(duì)

window.IocalStorage

特點(diǎn)

生命周期永久生效,除非手動(dòng)刪除否則關(guān)閉頁(yè)面也會(huì)存在
可以多窗口(頁(yè)面)共享(同一瀏覽器可以共享)
以鍵值對(duì)的形式存儲(chǔ)使用

使用

存儲(chǔ)數(shù)據(jù)：

localStoragesetItem(key,value)

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

localStorage.getItem(key)

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

localStorage.removeItem(key)

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

localStorage.clear()

IocalStorage的應(yīng)用方式和sessionStorage一樣只不過(guò)IocalStorage生命周期永久生效就算把瀏覽器關(guān)掉了，下次打開(kāi)數(shù)據(jù)還會(huì)在，這就是它最突出的特點(diǎn)

綜合案例

有一個(gè)這樣的登錄注冊(cè)頁(yè)面，我們要實(shí)現(xiàn)像文章開(kāi)頭那樣，可以保存注冊(cè)的數(shù)據(jù)，然后判斷登陸頁(yè)面輸入的用戶名與密碼和本地存儲(chǔ)的數(shù)據(jù)是否一一對(duì)應(yīng)。這個(gè)案例怎么應(yīng)用剛剛學(xué)到的本地存儲(chǔ)知識(shí)點(diǎn)完成呢？

思路

我們可以聲明一個(gè)數(shù)組，把在注冊(cè)頁(yè)面中輸入的用戶名都存儲(chǔ)在數(shù)組里，讓注冊(cè)頁(yè)面的用戶名和密碼通過(guò)本地存儲(chǔ)存儲(chǔ)在瀏覽器中。然后回到登陸頁(yè)面，先判斷輸入的用戶名是否在用戶名數(shù)組里，如果是的話再在本地存儲(chǔ)的數(shù)據(jù)中找到該用戶名對(duì)應(yīng)的密碼，如果這個(gè)密碼和我們?cè)诘顷戫?yè)面輸入的密碼相同，就登陸成功了

到此這篇關(guān)于JavaScript本地?cái)?shù)據(jù)存儲(chǔ)sessionStorage與localStorage使用詳解的文章就介紹到這了,更多相關(guān)JS sessionStorage與localStorage內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: