码迷,mamicode.com
首页 > Web开发 > 详细

js本地缓存的几种方法

时间:2020-08-05 00:12:27      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:属性   之间   逆转   二次   字符串类型   expires   字符串类   lazy   操作   

------------恢复内容开始------------

一.首先讲讲使用缓存的好处:

(1).当页面渲染的数据过多时,为了减轻对内存的占用,对初次接收且会用到的数据进行本地缓存,是有着大好处的.

(2).受网速等各种因素的影响,当渲染数据过多时,若存在频繁的切换页面,用户体验效果不佳。

 

二.常见的本地缓存方式

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

a.sessionStorage

临时的会话存储,只要当前的会话窗口未关闭,存储的信息就不会丢失,即便刷新了页面或者在编辑器中更改了代码,存储的会话信息也不会丢失。

用法:详情可见另一随笔:https://www.cnblogs.com/liangye/p/13430428.html

 

b.localStorage

是一种如果你不主动去清除,会一直将数据存储在客户端的储存方式,即使关闭了浏览器,下次打开的时候仍然可以看到之前存储的未主动清除的数据(即便是

杀毒软件或者浏览器自带的清除功能,也不能将localStorage存储的数据清除掉).

用法:和sessionStorgae一致

 

注意:storage存储的数据只能是字符串类型,其他类型的数据需做类型转换

storage直接属于顶层对象window.

2.cookie

cookie属于较老且最常见用的最多的技术了,cookie的优点很多,用起来也比较方便

但是缺点也很多:

cookie兼容所有的浏览器,但其存储的数据是有大小限制的,一般同源是4kb;

cookie本地存储的数据会被发送到服务器(所以建议在服务器环境下使用cookie);

跨域访问问题;浪费带宽等等;

 

然:最近在使用本地cookie缓存时发现chrome竟然不支持js本地操作cookie,其他市面上的主流浏览器基本都支持

这也告诉了我们:在使用cookie前,先确认浏览器支不支持cookie先!!!

检查当前浏览器是否支持或者禁用了cookie,可用以下js代码:

技术图片
 1 var dt = new Date();
 2 dt.setSeconds(dt.getSeconds() + 60);
 3 document.cookie = "cookietest=1; expires=" + dt.toGMTString();
 4 var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
 5 if(!cookiesEnabled){
 6     //没有启用cookie
 7     alert("没有启用cookie ");
 8 }else{
 9     //已经启用cookie
10     alert("已经启用cookie ");
11 }
View Code

可见chrome:技术图片

在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=<value>[;expires=<date>][;domain=<domain>][;secrue]"

普通的存储数据如下:

    document.cookie = "id=18";
    document.cookie = "name=liangye";
    alert(document.cookie); //id=18; name=liangye 由于没有设置有效期expires,浏览器关闭后会自动来清理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加密后的数据二次加密)

  • 想要了解加密的可参考这两个入门链接:https://www.jianshu.com/p/650a6d29c134;https://www.jianshu.com/p/c256ffba7c62

js本地缓存的几种方法

标签:属性   之间   逆转   二次   字符串类型   expires   字符串类   lazy   操作   

原文地址:https://www.cnblogs.com/liangye/p/13437107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!