首页 > 网络编程 > JavaScript > 基础知识 > localStorage、sessionStorage、Cookie的区别

解读localStorage、sessionStorage、Cookie的使用区别及特点

2025-06-20 09:12:22 作者：hoho不爱喝酒

这篇文章主要介绍了localStorage、sessionStorage、Cookie的使用区别及特点,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、localStorage、sessionStorage、Cookie是什么？

localStorage、sessionStorage、 Cookie 都是浏览器中用于存储数据的机制，但它们在存储的范围、持久性、和使用场景上有显著的区别。

二、各自特点以及之间的区别

1. window.localStorage

作用范围: 存储的数据在整个浏览器的同一域名下都可以访问（包括不同的标签页、窗口）。
持久性: 数据永久保存在浏览器中，直到通过代码删除或用户清除浏览器数据为止，即使关闭浏览器和计算机，数据仍然存在。
存储容量: 一般为 5MB 左右，不同浏览器可能会有所不同。
使用场景: 适用于需要长期保存的、与特定用户相关的数据，例如用户偏好设置、主题选择等。

2. sessionStorage

作用范围: 存储的数据仅在同一浏览器窗口或标签页中可用，不同的标签页和窗口间不能共享 sessionStorage 数据。
持久性: 数据在浏览器窗口或标签页关闭时被自动清除。
存储容量: 一般也为 5MB 左右，与 localStorage 相同。
使用场景: 适用于仅在单个浏览会话期间需要保存的数据，例如表单输入临时保存、单次操作步骤记录等。

3. Cookie

作用范围: 可以在同一域名下的所有浏览器窗口和标签页中访问。通过设置 Domain 属性，甚至可以在子域之间共享 Cookie。
持久性: 可以设置 Expires 或 Max-Age 属性来控制 Cookie 的过期时间。如果没有设置，则 Cookie 在浏览器关闭后会被删除（即所谓的“会话性 Cookie”）。
存储容量: 每个 Cookie 的大小通常限制为 4KB，总数也有限制（不同浏览器有所不同，通常一个域名下最多 20-50 个）。
使用场景: 适用于与服务器之间的会话管理、保存用户登录状态、跟踪用户行为等。由于 Cookie 会在每次 HTTP 请求时发送到服务器，所以通常用于需要与服务器交互的场景。

三、写一个html页面以用来测试这三者不同的区别

下面是一个简单的 HTML 页面，用来测试 localStorage、sessionStorage 和 Cookie 之间的区别。

这个页面包含三个按钮，分别用于设置、读取和删除 localStorage、sessionStorage 和 Cookie 的值，并在页面上显示结果。

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