js前端缓存的几种方法

一、缓存的好处

1. 当页面渲染的数据过多时，为了减轻对内存的占用，对初次接收且会用到的数据进行本地缓存，是有着大好处的.
2. 受网速等各种因素的影响，当渲染数据过多时，若存在频繁的切换页面，用户体验效果不佳。

二、常见的本地缓存

1. 利用storage来对数据进行存储(sessionStorage、localStorage)

a. sessionStorage
临时的会话存储，只要当前的会话窗口未关闭，存储的信息就不会丢失，即便刷新了页面或者在编辑器中更改了代码，存储的会话信息也不会丢失。
b. localStorage
如果不主动删除，则会永久的存储在用户本地
封装的小工具方法：localStorage.js

2. cookie

cookie属于较老且最常见用的最多的技术了，cookie的优点很多，但是缺点也很多：

1. cookie兼容所有的浏览器，但其存储的数据是有大小限制的，一般同源是4kb；
2. cookie本地存储的数据会被发送到服务器（所以建议在服务器环境下使用cookie）；
3. 跨域访问问题；浪费带宽等等；
4. 存在浏览器不支持的情况：chrome不支持，其他市面上的主流浏览器基本都支持
   所以：在使用cookie前，先确认浏览器支不支持cookie，检查当前浏览器是否支持或者禁用了cookie，代码如下：

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 ");
}

在js的脚本中，cookie实际上是document的一个字符属性，当你读取cookie的值时，得到的是一个字符串，里面的是当前web存放的所有的cookie的name,value,除此之外，
每一个cookie除了有name，value，还有其他四个属性：expires过期时间,path路径，domain域以及secure安全等。
cookie中存储的数据，如果没有设置有效期的话，浏览器关闭的时候就会被清空（并非关系选项卡）

cookie的区分是以域名的方式。

cookie的用法：以键值对的方式来存储数据（key：value形式）,一个域名下能存储的cookie个数是不同的，具体的看浏览器的支持性了

当一个域名下有多个cookie时，输出document.cookie时输出的是当前域名下的所有cookie，cookie之间以分号加空格的形式隔开

存储格式：document.cookie=“name=[;expires=][;domain=][;secrue]”

普通的存储数据如下：

  document.cookie = "id=18";
    document.cookie = "name=liangye";
    alert(document.cookie); //id=18; name=liangye 由于没有设置有效期expires,浏览器关闭后会自动来清理cookie（并非关闭标签）

js中对cookie的封装使用

三.cookie和storage的区别

1. cookie兼容所有的浏览器（本地cookie谷歌不支持），storage不支持IE6~8;
2. 二者对存储的内容均有大小限制，前者同源情况写一般不能存储4kb的内容，后者同源一般能存储只能存储5MB的数据
3. cookie有过期时间，localStorage是永久存储（如果你不手动去删除的话）
4. 一些浏览器处于安全的角度可能会禁用cookie,但无法禁用localStorage

实际项目中本地缓存都能来存储什么？

cookie：记住用户名密码以便下次自动登录等等：当用户登录成功后，存储用户的部分信息，便可以在项目的任何页面知道当前的用户是谁了。

storage：存储一些不容易过期的数据（如从api接口中接收的用于渲染页面的数据），在存储时一般加入一个存储时间(time:Date.now()),以便在下次

刷新页面的时候判断存储的事件有没有超过预定的时间；也可以用来存储一些页面的源代码，比如css样式或者html等等（有必要的时候需要来结合前台的数据）；

注意：本地存储一般是明文存储，对于重要的信息不要直接存储在本地，如果非要存储的话，记得要对存储的信息进行加密。

加密方法

a.可逆转加密（一般都是自己来设置自规则）
b.不可逆转加密：（一般都是基于MD5来进行加密，可能会把MD5加密后的数据二次加密）

今天的文章js前端缓存的几种方法分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。