js缓存三种方法

左手的ㄟ右手 2021-07-24 19:52 555阅读 0赞

**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）；本地保存的数据会发送给服务器，浪费带宽 等等；

代码如下：