文章目录
一、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: 用于服务器和客户端之间的数据交换，通常用于会话管理、身份验证等场景，具有小容量和广泛的作用范围。