缓存（Cookie,SessionStorage,localStorage）详解

最新推荐文章于 2025-05-09 15:02:29 发布

原创最新推荐文章于 2025-05-09 15:02:29 发布 · 845 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#cookie

本文详细介绍了浏览器的缓存机制，包括Cookie、SessionStorage和localStorage的使用场景、区别及操作方法。Cookie主要存储用户信息，容量4KB，每次请求时会发送给服务器；localStorage数据持久化，容量达5MB，适用于草稿功能；sessionStorage仅限会话期间，用于页面间参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.缓存
浏览器缓存：Cookie,SessionStorage,localStorage缓存
缓存在浏览器

查看：浏览器
作用：提高访问速度
场景：1.存储用户信息 2.缓存浏览器记录 3.草稿箱，自动保存
位置：浏览，http缓存，服务器，CDN
浏览器缓存
js:cookie
html5:sessionStorage,localStorage
使用：1.cookie
document.cookie=“键值对”

二.html5 sessionStorage,localStorage
cookie,本地缓存，本地存储
区别:
1.Cookie主要用于用户信息的存储, 容量为4KB，当你存储的内容在每次请求后端的时候都需要的情况下才需要放到 Cookie 中
用户信息，跟与后台传输数据相关，可以设置过期时间,容量为4KB
2.localStorage的数据将一直保存在浏览器内，直到用户清除浏览器缓存数据为止，容量最大为5M
自带草稿功能，纯浏览器，只能手动移除
3.sessionStorage
会话,会话结束，数据清除，页面与页面传参

使用场景

1.localStorage可以用来统计页面访问次数

2.sessionStorage 可以用来统计当前页面元素的点击次数

3.cookie 一般存储用户名密码相关的信息，一般可以使用escape转义编码后存储

三.本地存储
localStorage.setItem(“username”,“9909”);
localStorage.getItem(“username”);
window.localStorage;

cookie

//1.获取cookie
function getCookie(key){
    var cookies = document.cookie;
    var cookieArr = cookies.split("; ");
    for(var i=0;i<cookieArr.length;i++){
        var infoArr = cookieArr[i].split("=")
        if(infoArr[0]==key){
            return decodeURI(infoArr[1])
        }
    }   
}

//2.设置cookie  过期时间==>有效期；
function setCookie(key,value,t){
    var date = new Date();//对象
    date.setDate(date.getDate()+t)
    document.cookie = key+"="+encodeURI(value)+";expires="+date.toGMTString()
}



//3.移除cookie

function removeCookie(key){
setCookie(key,"",-1)
}