胖蔡说技术
随便扯扯

JS实现缓存的三种方式

前端开发中,为了网页的访问速度、降低常规数据的请求频率,我们通常会使用缓存的方式实现数据的本地化存储,本文主要介绍JS中三种常见的缓存方式的实现。若有疑问的欢迎评论区反馈讨论。

JS中常用的缓存方式如下:

  • Cookie缓存
  • localStorage缓存
  • sessionStorage缓存

Cookie缓存

cookie缓存某种意义上可以理解为服务端缓存,会话缓存。cookie也是用的比较多得一个缓存方式,但其局限性也较大,总结其特点如下:

  • 不可跨域。
  • 大小为4K
  • 可以灵活设置生存周期。
  • 操作使用较为复杂,由于cookie其本质是设置在header的头数据,所以操作数据需要对数据进行拆分重组过程。

cookie操作代码如下所示:

function SetCookie(name, value) {
        var key = '';
        var Days = 2;
        var exp = new Date();
        var domain = "";
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        if (key == null || key == "") {
            document.cookie = name + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
        }
        else {
            var nameValue = GetCookie(name);
            if (nameValue == "") {
                document.cookie = name + "=" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
            }
            else {
                var keyValue = getCookie(name, key);
                if (keyValue != "") {
                    nameValue = nameValue.replace(key + "=" + keyValue, key + "=" + encodeURI(value));
                    document.cookie = name + "=" + nameValue + ";expires=" + exp.toGMTString() + ";path=/;domain=" + domain + ";";
                }
                else {
                    document.cookie = name + "=" + nameValue + "&" + key + "=" + encodeURI(value) + ";expires=" + exp.toGMTString() + ";path=/;" + domain + ";";
                }
            }
        }
    }
 
    function GetCookie(name) {
        var nameValue = "";
        var key = "";
        var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
        if (arr = document.cookie.match(reg)) {
            nameValue = decodeURI(arr[2]);
        }
        if (key != null && key != "") {
            reg = new RegExp("(^| |&)" + key + "=([^(;|&|=)]*)(&|$)");
            if (arr = nameValue.match(reg)) {
                return decodeURI(arr[2]);
            }
            else return "";
        }
        else {
            return nameValue;
        }
    }

localStorage缓存

localStorage是将数据存储在浏览器本地,只要不清理,其数据将一直存在,数据存放大小相较于Cookie而言也较大,数据大小约5MB,其代码操作如下所示:

// 数据存储 
localStorage.setItem("name","value");
// 数据读取
localStorage.getItem("name");
// 数据删除
localStorage.removeItem("name");
//清空localStorage
localStorage.clear();

sessionStorage缓存

sessionStorage也是将数据存储在本地,不同的是sessionStorage属于会话级别的存储,其存储周期仅仅在整个会话周期,当你关闭所有的网站网页后,其会话数据也将被清空,下次重新进入后数据将不复存在,其操作的代码如下所示:

// 数据存储
sessionStorage.setItem("name", "胖蔡");
// 数据读取
var name = sessionStorage.getItem("name");
console.log("缓存的name值:",name); // 缓存的name值:胖蔡
// 数据删除
sessionStorage.removeItem("name");
// 清空数据
sessionStorage.clear();
赞(4) 打赏
转载请附上原文出处链接:胖蔡说技术 » JS实现缓存的三种方式
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏