js缓存三种方法

1.使用sessionStorage、localStorage存储数组与对象

localStorage对象是HTML5的客户端存储持久化数据的方案。为了能访问到同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一种协议,在同一个端口上。

过期策略:localstorage永久存储,不过期,除非手动删除,sessionstorage在重启浏览器、关闭页面或新开页面时失效。

localStorage是Storage类型的实例。有以下的几种方法:

①clear():删除所有值。

②getItem(name):根据指定的名字name获取对应的值

③key(index):在指定的数字位置获取该位置的名字。

④removeItem(name):删除由name指定的名值对

⑤setItem(name,value):为指定名字设置一个对应的值

localStorage对象可以通过点号调用这些方法。

例:使用方法来存储数据

localStorage.setItem(“name”,“songyuhua”);//这样就用localStorage存储了一个名字为name的数据,数据的内容为 “songyuhua”

使用方法来读取数据

localStorage.getItem(“name”);//这样就读取了名字为“name”的数据的值。

有时候,我们需要将数据存储到sessionStorage和localStorage中,这样做的好处有:

1 缓存数据
2 减少对内存的占用

但是,storage只能存储字符串的数据,对于JS中常用的数组或对象却不能直接存储。
它能保存更大的数据(IE8上是10MB,Chrome是5MB),同时保存的数据不会再发送给服务器,避免带宽浪费。

单个存储

localStorage存储方法(sessionStorage类似)

localStorage.name =’vanida; 
localStorage[“name”]=’vanida’; 
localStorage.setItem(“name”,”vanida”); 

//这三种设置值方式是一样的;
localStorage获取值方法

var name = localStorage[“name”] 
var name= localStorage.name 
var name= localStorage.getItem(“name”); 

//这三种获取值方式是一样的;
localStorage清除特定值方法

//清除name的值 
localStorage.removeItem(“name”); 
localStorage.name=”; 

localStorage清除所有值方法

localStorage.clear() 

localStorage只能存储字符串,如果需要存储对象,首先要转化为字符串。利用JSON.stringify();

多个存储

可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中就可以了。请看下面的代码。

var obj = { name:'Jim' };

var str = JSON.stringify(obj);

//存入

sessionStorage.obj = str;

//读取

str = sessionStorage.obj;

//重新转换为对象

obj = JSON.parse(str);

localStorage也一样,只是和sessionStorage的存储时间不一样。

需要注意的是,JS中的数组本质上也是对象类型,所以上面的代码对数组也是适用的。

var person = {name:”vanida”,”sex”:”girl”,”age”:25}; 

localStorage.setItem(“person”,JSON.stringify(person)); 

person = JSON.parse(localStorage.getItem(“person”));

// 注意:JSON.stringify()中不要忘了“i”,stringify而不是stringfy! 
// 然后取出person的对象你可以用JSON.parse(); 

2.Cookie

这个恐怕是最常见也是用得最多的技术了,也是比较古老的技术了。COOKIE优点很多,使用起来很方便
但它的缺点也很多:
比如跨域访问问题;无法保存太大的数据(最大仅为4KB);本地保存的数据会发送给服务器,浪费带宽 等等;

代码如下:

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;
        }
    }
    原文作者:ঞ᭄阿້໌ᮩ莲໌້ᮨꦿ
    原文地址: https://blog.csdn.net/qq_41241504/article/details/109266650
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞