cookie以及Storage的共同点、区别与使用
1、 Storage 浏览器本地存储
1.1 localStorage与 sessionStorage
- Storage 不会自动把数据发送给服务器，仅在本地保存
- Storage 也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大
- 数据有效期不同
- sessionStorage： 仅在当前浏览器窗口关闭之前有效
- localStorage： 始终有效，窗口或者浏览器关闭也一直保存，用作持久数据
- 作用域不同
- sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面
- localStorage：在所有的同源窗口中都是共享的
- webStorage 支持事件通知机制，可以将数据更新的通知发送给监听者
- webStorage 的 api 接口使用更方便
1.2 使用
xxxStorage.setItem('key','value')xxxStorage.getItem('key')xxxStorage.removeItem('key')xxxStorage.clear()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>localStorage</title>
</head>
<body>
<h2>localStorage</h2>
<button onclick="saveData()">点我保存一个数据</button>
<button onclick="readData()">点我读取一个数据</button>
<button onclick="deleteData()">点我删除一个数据</button>
<button onclick="deleteAllData()">点我删除所有数据</button>
<script>
let p = {
name: '张三',
age: 18
}
function saveData() {
localStorage.setItem('msg','hello!!!')
localStorage.setItem('person',JSON.stringify(p))
}
function readData() {
console.log(localStorage.getItem('msg'));
consoloe.log(JSON.parse(localStorage.getItem('person')))
}
function deleteData() {
localStorage.removeItem('msg')
}
function deleteAllData() {
localStorage.clear()
}
</script>
</body>
</html>
1.3 手写一个会过期的localStorage
惰性删除：
某个键值过期之后，该键值不会被删除。而是等到下次使用，被检查过期值，才能得到删除
var lsc = (function(self){
var prefix = 'one_more_lsc_'
// 增加一个键值对数据
self.set = function(key, val, expires) {
key = prefix + key
val = JSON.stringify({'val': val, 'expires': new Date().getTime() + expires * 1000})
localStorage.setItem(key, val)
}
// 读取对应键的值
self.get = function (key) {
key = prefix + key;
var val = localStorage.getItem(key)
if (!val) {
return null;
}
val = JSON.parse(val);
if (val.expires < new Date().getTime()) {
localStorage.removeItem(key);
return null;
}
return val.val
}
return self;
}(lsc || {}));
定时删除
- 每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用
- 定时删除有效减少了对localSorage空间的浪费
每隔1s执行一次定时删除，操作如下：
- 随机测试20个设置了过期时间的key
- 删除所有发现的已过期的key
- 若删除的key超过5个则重复步骤一，直至重复500次
var lsc = (function (self) {
var prefix = 'one_more_lsc'
var list = [];
// 初始化list
self.init = function () {
var keys = Object.keys(localStorage)
var reg = new RegExp('^' + prefix);
var temp = []
// 遍历所有localStorage中的所有key
for (var i = 0; i < keys.length; i++) {
// 找出可过期缓存的key
if (reg.test(keys[i])) {
temp.push(keys[i])
}
}
list = temp;
}
self.init();
self.check = function () {
if (!list || list.length == 0) {
return
}
var checkCount = 0
while(checkCount < 500) {
var expireCount = 0
// 随机测试20个设置了过期时间的key
for (var i = 0; i < 20; i++) {
if(list.length == 0) {
break;
}
var index = Math.floor(Math.random() * list.length);
var key = list[index];
var val = localStorage.getItem(list[index])
// 从list中删除被惰性删除的key
if(!val) {
list.splice(index, 1);
expireCount++;
countinue;
}
val = JSON.parse(val)
// 删除所有发现的已过期的key
if (val.expires < new Date().getTime()) {
list.splice(index, 1);
localStorage.removeItem(key)
expireCount++
}
}
// 若删除的key不超过5个则跳出循环
if (expiresCount <= 5 || list.length == 0) {
break
}
}
// 每隔1s执行一次定时删除
window.setInterval(self.check,1000)
return self;
}
}(lsc || {}))
1.4 Storage的限制
- 浏览器的大小不统一，并且在 IE8 以上版本才支持 localStorage 这个属性
- 所有浏览器都会把 Storage 的值类型限定为string类型，使用 JSON.stringfy() 将 JSON 对象转换为字符串
- Storage 在浏览器的隐私模式下面是不可读的
- Storage 本质上是对字符串的读取，存储内容多的话会消耗内存空间，导致页面变卡
- Storage 不能被爬虫抓取到
2 Cookie
2.1 cookie与Storage的区别
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和 服务器间来回递
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
- 存储大小限制不同： cookie数据不能超过4K
- 同时因为每次http请求都需要携带cookie，所以cookie知识和保存很小的数据，如会话标识
- 数据有效期不同：cookie只在设置的cookie过期时间之前有效，即使窗口关闭或者浏览器关闭
- 作用域不同： 在所有同源窗口中都是共享的
2.2 cookie 的概念
-
cookie是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时，就可以通过JS来创建和读取cookie
-
cookie是存于用户硬盘的一个文件。这个文件对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用
- cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用
-
不同浏览器对cookie的实现不同，保存在一个浏览器中的cookie到另一个浏览器是不能获取的
2.3 cookie 的用途
- 只需要登陆一次，将登录信息存放在cookie中。下次登陆时就可以直接获取cookie中的用户名密码来进行登录
- 页面之间的传值，一个页面跳转至另一个页面： 将数据保存在cookie中，然后在另外页面再去获取cookie中的数据
2.4 cookie 的使用
document.cookie = "name=value;expires=evalue;path=pvalue;domain=dvalue;secure;"
这是一个键值对，分别表示要存入的属性和值。为了防止中文乱码，我们可以使用 encodeURIComponent() 编码；decodeURIComponent() 解码。
function setCookie(objName, objValue, objHours) { // 添加cookie
var str = objName + '=' + encodeURIComponent(objValue);
if (objHours > 0) { // 为0时不设定过期时间，浏览器关闭时cookie自动消失
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += ";expires=" + date.toUTCString();
}
document.cookie = str
}
// 获取cookie
function getCookie(objName) { // 获取指定名称的cookie值
// 多个cookie保存的时候是以; 分开的
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == objName) {
return decodeURIComponent(temp[1])
} else {
return "";
}
}
// 为了删除指定名称的cookie，可以将过期时间设定为一个过去的时间
function delCookie(name) {
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toUTCString();
}
}
2.5 cookie 的使用注意
- cookie 可能被禁用，当用户非常注重个人隐私保护时，可能被禁用
- cookie 是与浏览器相关的（即使访问同一个页面，不同浏览器之间所保存的 cookie 也是不能互相访问的）
- cookie 可能被删除，cookie 就是硬盘上的一个文件，可能被用户删除
- cookie 安全性不够高，所有的 cookie 都是以纯文本的形式记录在文件中，要保护用户名密码等信息时，最好实现经过加密处理
- cookie 在保存时，只要后面保存的 name 相同，就覆盖前面的 cookie
3 Storage与Cookie的共同点
都是保存在浏览器端，且都是同源的
分类:
JavaScript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）