前端缓存

最新推荐文章于 2025-05-13 10:15:02 发布

群QQQ

最新推荐文章于 2025-05-13 10:15:02 发布

阅读量663

点赞数

CC 4.0 BY-SA版权

文章标签：前端缓存

本文链接：https://blog.youkuaiyun.com/qq_29643329/article/details/81736149

本文深入探讨了前端缓存技术，包括cookie、localStorage和sessionStorage的特性与使用方法。详细讲解了cookie的大小限制、安全性及过期时间设置，localStorage的大容量存储优势与持久性，以及sessionStorage的会话级别存储特性。

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

1.cookie

cookie的大小被限制在4KB，以键值对的形式保存的，即key=value的格式。cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能。cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

cookie可以设置过期时间，若没有设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。

手动查看浏览器cookie以及过期时间（浏览器地址栏输入）。谷歌：chrome://settings/siteData 火狐：about:preferences#privacy

注意：

谷歌浏览器chrome本地调试cookie不生效，不管是使用jquery的cookie插件，还是js原生态的cookie方法都不生效。
原因在于chrome不支持js在本地操作cookie。据测试，除了chrome浏览器外，其他主流浏览器（ie、firefox等）都支持js在本地操作cookie。当然部署到服务器上所有浏览器都是支持的。
当然，还有另外一个原因：浏览器设置成不支持cookie。这样，调试js操作cookie当然也是不生效的。
那么，怎么知道当前浏览器不支持或Cookie已被禁用呢？可以使用以下js代码测试：

var dt = new Date();
dt.setSeconds(dt.getSeconds() + 60);
document.cookie = "cookietest=1; expires=" + dt.toGMTString();
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
if(!cookiesEnabled) {
   //没有启用cookie
   alert("没有启用cookie ");
} else{
   //已经启用cookie
   alert("已经启用cookie ");
}

谷歌浏览器中可以看到cookie的创建时间和到期时间，可以更改本地日期进行测试。F12调试面板也可以看到cookie的信息

cookie小练习

练习内容：在2018年10月1日24点前显示m-tc里面的内容，并设置每次的缓存过期时间为一小时。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>前端缓存</title>
   <style>
   .m-tc{display: none;}
</style>
</head>
<body>
   <div class="m-tc">Hello</div>
   <button class="btnClose">关闭</button>
   <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
   <script>
       $(function(){
           var endTime = (new Date(2018, 9, 1, 23, 59, 0));
           //检查当前时间
           if (new Date() < endTime) {
               checkcookie();
           }
           //点击关闭时设置缓存名称、缓存内容、过期时间。
           $(".btnClose").on("click", function () {
               setcookie('username', 1, 1)
               $(".m-tc").hide();
           });

       })

       function setcookie(c_name, value, expiredays) {
           var exdate = new Date();
           exdate.setHours(exdate.getHours() + expiredays);
           document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
}

function checkcookie() {
   username= getcookie('username');
   if (username != 1) {
       $(".m-tc").show();
   }

}

function getcookie(c_name) {
   if (document.cookie.length > 0) {
       c_start = document.cookie.indexOf(c_name + "=")
       if (c_start != -1) {
           c_start = c_start + c_name.length + 1
           c_end = document.cookie.indexOf(";", c_start)
           if (c_end == -1) c_end = document.cookie.length
               return unescape(document.cookie.substring(c_start, c_end))
       }
   }
   return ""
}
</script>
</body>
</html>

2.localStorage

localStorage解决了cookie存储空间不足的问题。localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它的特点就是“持久”，一旦保存，不通过手动清除的话，数据就永远不会过期。第二天、第二周或下一年之后，数据依然可用。它的保存格式是键值对的方式也就是“key-value”的方式保存的。IE8以上的IE版本才支持localStorage这个属性。localStorage的使用是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage。localStorage只支持string类型的存储。

localStorage写入的三种方式：
localStorage["a"]=1;
localStorage.b=1;
localStorage.setItem("c",3);

localStorage读取的三种方式：
var a=localStorage["a"];
var b=localStorage.b;
var c=localStorage.getItem("c");

localStorage的修改：

localStorage.b=1;
console.log(localStorage.b);//1

localStorage.b=2;
console.log(localStorage.b);//2

localStorage的删除：
删除所有：
localStorage.clear();

删除某个：
localStorage.removeItem("a");

获取localStorage的键：
localStorage.key(0)； //a

3.sessionStorage

sessionStorage是一种会话级别的本地存储，一旦关闭浏览器它就会消失。它的作用域是窗口级别的，不同窗口间的sessionStorage数据不能共享。

属性方法	说明
sessionStorage.length	获得storage中的个数
sessionStorage.key(n)	获得storage中第n个元素对的键值（第一个元素是0）
sessionStorage.getItem(key)	获取键值key对应的值
sessionStorage.key	获取键值key对应的值
sessionStorage.setItem(key, value)	添加数据，键值为key，值为value
sessionStorage.removeItem(key)	移除键值为key的数据
sessionStorage.clear()	清除所有数据