解读localStorage、sessionStorage、Cookie的使用区别及特点
更新时间：2025年06月20日 09:12:21 作者：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>
四、开始测试
打开两个窗口，测试窗口间的 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: 用于服务器和客户端之间的数据交换，通常用于会话管理、身份验证等场景，具有小容量和广泛的作用范围。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- javascript中本地存储localStorage，sessionStorage，cookie，indexDB的用法与使用场景汇总
- 本地存储cookie、localStorage和sessionStorage示例详解
- Vue浏览器缓存sessionStorage+localStorage+Cookie区别解析
- vue如何使用cookie、localStorage和sessionStorage进行储存数据
- ahooks封装cookie localStorage sessionStorage方法
- JavaScript本地储存:localStorage、sessionStorage、cookie的使用
- 常见的浏览器存储方式（cookie、localStorage、sessionStorage）
相关文章
javascript 打开页面window.location和window.open的区别
有时候需要用js来实现页面的打开，因为js下有window.location和window.open的不同实现方法，下面来简单的说明下区别。2010-03-03
caller返回一个函数的引用，这个函数调用了当前的函数;callee放回正在执行的函数本身的引用，它是arguments的一个属性，感兴趣的你可以参考下或许可以帮助到你2013-03-03
这篇文章主要介绍了JavaScript中的关联数组问题的相关资料,需要的朋友可以参考下2015-03-03
这篇文章主要为大家介绍了JavaScript稀疏数组的使用示例教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
Bom：浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，下面我们来一起学习一下吧2019-05-05
一个简单的多级下拉菜单菜单但是由于业务和样式上的要求，为了简洁找了好多都不适合于是自己写了一个，晒出来与大家分享，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-03-03
本篇文章主要介绍了详解js的异步编程技术，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
首先要注意let是ES6中的东西,起码是IE10之前的IE浏览器兼容要千万当心!嗯...然后我们来看JavaScript中用let语句声明作用域的用法讲解2016-05-05
2008-01-01
下面小编就为大家带来一篇浅谈js内置对象Math的属性和方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
最新评论