前端缓存

本文深入探讨了前端缓存技术,包括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()清除所有数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值