localStorage、sessionStorage、Cookie的区别以及特点

hoho不爱喝酒

于 2024-08-22 17:49:29 发布

阅读量579

点赞数 8

分类专栏：随便写写文章标签：前端服务器 javascript

本文链接：https://blog.csdn.net/m0_70590680/article/details/141432924

版权

随便写写专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

一、localStorage、sessionStorage、Cookie是什么？
二、各自特点以及之间的区别
三、写一个html页面以用来测试这三者不同的区别
四、开始测试
总结

一、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>

四、开始测试

打开两个窗口，测试窗口间的 localStorage、sessionStorage 和 Cookie 的访问情况，以更好地理解它们的差异。
页面1
在这里插入图片描述
页面2

测试 `localStorage`:

页面1点击Set localStorage按钮
在这里插入图片描述

页面2点击Get localStorage按钮
在这里插入图片描述

页面1点击Remove localStorage按钮
在这里插入图片描述

页面2点击Get localStorage按钮
在这里插入图片描述

测试 `sessionStorage`:

页面1点击Set sessionStorage按钮
在这里插入图片描述

页面2点击Get sessionStorage按钮
在这里插入图片描述

测试 `Cookie`:

页面1点击Set Cookie按钮
在这里插入图片描述
页面2点击Get Cookie按钮

页面210s后再次点击Get Cookie按钮（设置Cookie10s后过期）

总结

localStorage: 用于长期、持久的客户端数据存储，适合需要跨页面访问并长期保存的数据。
sessionStorage: 用于单次会话的数据存储，数据只在会话期间有效。
Cookie: 用于服务器和客户端之间的数据交换，通常用于会话管理、身份验证等场景，具有小容量和广泛的作用范围。

hoho不爱喝酒

关注

8
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
localStorage、sessionStorage、Cookie的区别以及特点

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

扫一扫