js前端缓存的几种方法
一、缓存的好处
- 当页面渲染的数据过多时,为了减轻对内存的占用,对初次接收且会用到的数据进行本地缓存,是有着大好处的.
- 受网速等各种因素的影响,当渲染数据过多时,若存在频繁的切换页面,用户体验效果不佳。
二、常见的本地缓存
1. 利用storage来对数据进行存储(sessionStorage、localStorage)
a. sessionStorage
临时的会话存储,只要当前的会话窗口未关闭,存储的信息就不会丢失,即便刷新了页面或者在编辑器中更改了代码,存储的会话信息也不会丢失。
b. localStorage
如果不主动删除,则会永久的存储在用户本地
封装的小工具方法:localStorage.js
2. cookie
cookie属于较老且最常见用的最多的技术了,cookie的优点很多,但是缺点也很多:
- cookie兼容所有的浏览器,但其存储的数据是有大小限制的,一般同源是4kb;
- cookie本地存储的数据会被发送到服务器(所以建议在服务器环境下使用cookie);
- 跨域访问问题;浪费带宽等等;
- 存在浏览器不支持的情况: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){//没有启用cookiealert("没有启用cookie ");
}else{//已经启用cookiealert("已经启用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的区别
- cookie兼容所有的浏览器(本地cookie谷歌不支持),storage不支持IE6~8;
- 二者对存储的内容均有大小限制,前者同源情况写一般不能存储4kb的内容,后者同源一般能存储只能存储5MB的数据
- cookie有过期时间,localStorage是永久存储(如果你不手动去删除的话)
- 一些浏览器处于安全的角度可能会禁用cookie,但无法禁用localStorage
实际项目中本地缓存都能来存储什么?
cookie
:记住用户名密码以便下次自动登录等等:当用户登录成功后,存储用户的部分信息,便可以在项目的任何页面知道当前的用户是谁了。
storage
:存储一些不容易过期的数据(如从api接口中接收的用于渲染页面的数据),在存储时一般加入一个存储时间(time:Date.now()),以便在下次
刷新页面的时候判断存储的事件有没有超过预定的时间;也可以用来存储一些页面的源代码,比如css样式或者html等等(有必要的时候需要来结合前台的数据);
注意:本地存储一般是明文存储,对于重要的信息不要直接存储在本地,如果非要存储的话,记得要对存储的信息进行加密。
加密方法
a.可逆转加密(一般都是自己来设置自规则)
b.不可逆转加密:(一般都是基于MD5来进行加密,可能会把MD5加密后的数据二次加密)
js前端缓存的几种方法相关推荐
- JS清除缓存的几种方法
一.CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?t=) 使用参数有两种可能: 第一.脚本并不存在,而是服务端动态生成的,因 ...
- JS - 前端生成 UUID 四种方法
全局唯一标识符(GUID,Globally Unique Identifier)也称作 UUID(Universally Unique IDentifier) . GUID 是一种由算法生成的二进制长 ...
- html js清除缓存,js清除浏览器缓存的几种方法
JS 缓存的问题一直都是我们又爱又恨的东西.也是我们比较头痛的问题, 一方面为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端, 但是另一方面,当js 文件有改动的时候, ...
- js清除浏览器缓存的几种方法(项目总结)
以前很少关注这方面的问题,直达我们的技术经理找我们说要换框架,为什么换框架呢,因为缓存的问题,原来的项目是用版本号作为刷新的依据的.因为微信 公众号上有这样一个机制,使用版本好的话,有时做不到及时刷新 ...
- ajax请求时清除浏览器缓存,js清除浏览器缓存的几种方法
JS 缓存的问题一直都是我们又爱又恨的东西.也是我们比较头痛的问题, 一方面为了提高网站响应速度,减少服务器的负担,和节省带宽,将需要将静态资源缓存在客户端, 但是另一方面,当 js 文件有改动的时候 ...
- 前端更新需要清空浏览器缓存_js清除浏览器缓存的几种方法
关于浏览器缓存 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据.像股票类网站实时更新等,这样的网站 ...
- js清除浏览器缓存的几种方法
2014年9月24日 4692次浏览 关于浏览器缓存 浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能.但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数 ...
- JS下载文件的三种方法
因为公司后端忙得无法给批量下载的api,就我们前端自己把多张图片打包成zip下载,zip打包我们用的是jszip,下面是js实现下载的三种方法: 利用HTML download 属性 var a = ...
- js--《js缓存的三种方法及区别与特点》
js缓存的三种方法与特点: ①H5本地存储sessionStrong: sessionStrong:临时的会话储存,只要当前的会话窗口未关闭,存储的信息就不会丢失,即使页面刷新或在编辑器中更改代码,存 ...
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
JavaScript location.reload() 方法 Location 对象的 reload() 方法用于重新加载当前文档(页面),语法如下: location.reload( false| ...
最新文章
- UART接口算法移植加密芯片的调试技巧——通讯调试
- 友盟分享快速集成--学习记录
- VS2005的depends工具 (分析EXE)
- 在package-lock.json中指定node-mass版本+独立编译flink中的flink-runtime-web模块
- 这是对R的误解!R的应用原来这么广!
- 36氪联合阿里云,共同研制中小企业发展「催化剂」
- Start Developing iOS Apps Today系列(二)
- TRACKER : 错误 TRK0005: 未能找到: “CL.exe”。系统找不到指定的文件。 无法打开源文件iosteam
- 【tensorRT文档翻译】7. Working With Dynamic Shapes
- Wireshark实战分析之DNS协议分析(一)
- CC2530 ZIGBEE ZStack 学习笔记——OSAL部分(学习《都教授讲Zigbee》视频时所作的笔记)
- 基于hilbert变换的数字信号_通过Hilbert变换实现移相算法
- 计算机病毒 爱虫病毒(lovebug),有哪些是典型计算机病毒
- 各层电子数排布规则_电子数的排布规律
- Tomcat服务器response header 200 OK问题
- 复现论文常用函数(一)tf.one_hot,tf.train.batch,tf.train.shuffle_batch,数据读取机制,获取文件路径,Bunch等
- redis之瘦小精干的位图 (一)
- 通过nodejs 服务器读取HTML文件渲染到页面
- 安全协议系列(二)----CCM与CCMP
- 游戏专辑一 3D游戏碰撞之体素内存、效率优化(未完待续10/14)