快捷導(dǎo)航

JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用詳解

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

這篇文章主要介紹了JavaScript本地數(shù)據(jù)存儲sessionStorage與localStorage使用，localStorage：永久存儲在本地，適合保存在本地的數(shù)據(jù)。sessionStorage：會話級的存儲，敏感帳號一次登陸

本地存儲特性

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

window.sessionStorage

特點

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

使用

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

sessionStorage.setItem(key,value)

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

sessionStorage.getItem(key)

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

sessionStorage.removeItem(key)

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

sessionStorage.clear()

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

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

例子

<!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">存儲數(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)我們點擊了之后，就可以把表單里面的值存儲起來
            var val = ipt.value;
            sessionStorage.setItem('uname', val);
            sessionStorage.setItem('pwd', val);
        });
        get.addEventListener('click', function() {
            // 當(dāng)我們點擊了之后，就可以把表單里面的值獲取過來
            console.log(sessionStorage.getItem('uname'));
        });
        remove.addEventListener('click', function() {
            // 
            sessionStorage.removeItem('uname');

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

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

window.IocalStorage

特點

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

使用

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

localStoragesetItem(key,value)

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

localStorage.getItem(key)

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

localStorage.removeItem(key)

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

localStorage.clear()

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

綜合案例

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

思路

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

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

您可能感興趣的文章: