腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

解讀localStorage、sessionStorage、Cookie的使用區(qū)別及特點(diǎn)

更新時(shí)間：2025年06月20日 09:12:21 作者：hoho不愛喝酒

這篇文章主要介紹了localStorage、sessionStorage、Cookie的使用區(qū)別及特點(diǎn),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

一、localStorage、sessionStorage、Cookie是什么？

localStorage、sessionStorage、 Cookie 都是瀏覽器中用于存儲(chǔ)數(shù)據(jù)的機(jī)制，但它們在存儲(chǔ)的范圍、持久性、和使用場景上有顯著的區(qū)別。

二、各自特點(diǎn)以及之間的區(qū)別

1. window.localStorage

作用范圍: 存儲(chǔ)的數(shù)據(jù)在整個(gè)瀏覽器的同一域名下都可以訪問（包括不同的標(biāo)簽頁、窗口）。
持久性: 數(shù)據(jù)永久保存在瀏覽器中，直到通過代碼刪除或用戶清除瀏覽器數(shù)據(jù)為止，即使關(guān)閉瀏覽器和計(jì)算機(jī)，數(shù)據(jù)仍然存在。
存儲(chǔ)容量: 一般為 5MB 左右，不同瀏覽器可能會(huì)有所不同。
使用場景: 適用于需要長期保存的、與特定用戶相關(guān)的數(shù)據(jù)，例如用戶偏好設(shè)置、主題選擇等。

2. sessionStorage

作用范圍: 存儲(chǔ)的數(shù)據(jù)僅在同一瀏覽器窗口或標(biāo)簽頁中可用，不同的標(biāo)簽頁和窗口間不能共享 sessionStorage 數(shù)據(jù)。
持久性: 數(shù)據(jù)在瀏覽器窗口或標(biāo)簽頁關(guān)閉時(shí)被自動(dòng)清除。
存儲(chǔ)容量: 一般也為 5MB 左右，與 localStorage 相同。
使用場景: 適用于僅在單個(gè)瀏覽會(huì)話期間需要保存的數(shù)據(jù)，例如表單輸入臨時(shí)保存、單次操作步驟記錄等。

3. Cookie

作用范圍: 可以在同一域名下的所有瀏覽器窗口和標(biāo)簽頁中訪問。通過設(shè)置 Domain 屬性，甚至可以在子域之間共享 Cookie。
持久性: 可以設(shè)置 Expires 或 Max-Age 屬性來控制 Cookie 的過期時(shí)間。如果沒有設(shè)置，則 Cookie 在瀏覽器關(guān)閉后會(huì)被刪除（即所謂的“會(huì)話性 Cookie”）。
存儲(chǔ)容量: 每個(gè) Cookie 的大小通常限制為 4KB，總數(shù)也有限制（不同瀏覽器有所不同，通常一個(gè)域名下最多 20-50 個(gè)）。
使用場景: 適用于與服務(wù)器之間的會(huì)話管理、保存用戶登錄狀態(tài)、跟蹤用戶行為等。由于 Cookie 會(huì)在每次 HTTP 請(qǐng)求時(shí)發(fā)送到服務(wù)器，所以通常用于需要與服務(wù)器交互的場景。

三、寫一個(gè)html頁面以用來測試這三者不同的區(qū)別

下面是一個(gè)簡單的 HTML 頁面，用來測試 localStorage、sessionStorage 和 Cookie 之間的區(qū)別。

這個(gè)頁面包含三個(gè)按鈕，分別用于設(shè)置、讀取和刪除 localStorage、sessionStorage 和 Cookie 的值，并在頁面上顯示結(jié)果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Storage Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        button {
            margin: 10px 0;
            padding: 10px;
            font-size: 16px;
        }
        .output {
            margin-top: 20px;
            border-top: 1px solid #ccc;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <h1>Storage Test: localStorage, sessionStorage, and Cookies</h1>

    <h2>localStorage</h2>
    <button onclick="setLocalStorage()">Set localStorage</button>
    <button onclick="getLocalStorage()">Get localStorage</button>
    <button onclick="removeLocalStorage()">Remove localStorage</button>

    <h2>sessionStorage</h2>
    <button onclick="setSessionStorage()">Set sessionStorage</button>
    <button onclick="getSessionStorage()">Get sessionStorage</button>
    <button onclick="removeSessionStorage()">Remove sessionStorage</button>

    <h2>Cookie</h2>
    <button onclick="setCookie()">Set Cookie</button>
    <button onclick="getCookie()">Get Cookie</button>
    <button onclick="removeCookie()">Remove Cookie</button>

    <div class="output" id="output"></div>

    <script>
        // localStorage functions
        function setLocalStorage() {
            localStorage.setItem('testLocalStorage', 'Hello from localStorage!');
            showOutput('localStorage set.');
        }

        function getLocalStorage() {
            const value = localStorage.getItem('testLocalStorage');
            showOutput('localStorage value: ' + value);
        }

        function removeLocalStorage() {
            localStorage.removeItem('testLocalStorage');
            showOutput('localStorage removed.');
        }

        // sessionStorage functions
        function setSessionStorage() {
            sessionStorage.setItem('testSessionStorage', 'Hello from sessionStorage!');
            showOutput('sessionStorage set.');
        }

        function getSessionStorage() {
            const value = sessionStorage.getItem('testSessionStorage');
            showOutput('sessionStorage value: ' + value);
        }

        function removeSessionStorage() {
            sessionStorage.removeItem('testSessionStorage');
            showOutput('sessionStorage removed.');
        }

        // Cookie functions
        function setCookie() {
            document.cookie = "testCookie=Hello from Cookie; path=/; max-age=3600"; // 1 hour expiration
            showOutput('Cookie set.');
        }

        function getCookie() {
            const cookies = document.cookie.split('; ').find(row => row.startsWith('testCookie='));
            const value = cookies ? cookies.split('=')[1] : null;
            showOutput('Cookie value: ' + value);
        }

        function removeCookie() {
            document.cookie = "testCookie=; path=/; max-age=0";
            showOutput('Cookie removed.');
        }

        // Utility function to show output on the page
        function showOutput(message) {
            const output = document.getElementById('output');
            const newMessage = document.createElement('p');
            newMessage.textContent = message;
            output.appendChild(newMessage);
        }
    </script>
</body>
</html>

四、開始測試

打開兩個(gè)窗口，測試窗口間的 localStorage、sessionStorage 和 Cookie 的訪問情況，以更好地理解它們的差異。

頁面1

頁面2

測試 localStorage

頁面1點(diǎn)擊Set localStorage按鈕

頁面2點(diǎn)擊Get localStorage按鈕

頁面1點(diǎn)擊Remove localStorage按鈕

頁面2點(diǎn)擊Get localStorage按鈕

測試 sessionStorage

頁面1點(diǎn)擊Set sessionStorage按鈕

頁面2點(diǎn)擊Get sessionStorage按鈕

測試 Cookie

頁面1點(diǎn)擊Set Cookie按鈕

頁面2點(diǎn)擊Get Cookie按鈕

頁面210s后再次點(diǎn)擊Get Cookie按鈕（設(shè)置Cookie10s后過期）

總結(jié)

localStorage: 用于長期、持久的客戶端數(shù)據(jù)存儲(chǔ)，適合需要跨頁面訪問并長期保存的數(shù)據(jù)。
sessionStorage: 用于單次會(huì)話的數(shù)據(jù)存儲(chǔ)，數(shù)據(jù)只在會(huì)話期間有效。
Cookie: 用于服務(wù)器和客戶端之間的數(shù)據(jù)交換，通常用于會(huì)話管理、身份驗(yàn)證等場景，具有小容量和廣泛的作用范圍。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解讀localStorage、sessionStorage、Cookie的使用區(qū)別及特點(diǎn)

目錄

一、localStorage、sessionStorage、Cookie是什么？