前端经常使用缓存技术之Cookie和localStorage和sessionStorage和ApplicationCache
一、Cookie
JavaScript是运行在客户端的脚本，所以通常是不可以设置Session的，由于Session是运行在服务器端的。而cookie是运行在客户端的，因此能够用JS来设置cookie。javascript
cookie的结构：简单地说，cookie是以键值对的形式保存的，即key=value的格式。各个cookie之间通常是以“;”分隔。php
cookie是浏览器提供的一种机制，它将document 对象的cookie属性提供给JavaScript。能够由JavaScript对其进行控制，而并非JavaScript自己的性质。cookie是存于用户硬盘的一个文件，这个文件一般对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。所以，cookie能够跨越一个域名下的多个网页，但不能跨越多个域名使用。 css
cookie机制将信息存储于用户硬盘，所以能够做为全局变量，这是它最大的一个优势。它能够用于如下几种场合。 html
（1）保存用户登陆状态。（2）跟踪用户行为。（3）定制页面。（4）建立购物车，例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。 前端
cookie能完成的部分应用，还有更多的功能须要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括如下几种： html5
（1）cookie可能被禁用。当用户很是注重我的隐私保护时，他极可能禁用浏览器的cookie功能；
（2）cookie是与浏览器相关的。这意味着即便访问的是同一个页面，不一样浏览器之间所保存的cookie也是不能互相访问的；
（3）cookie可能被删除。由于每一个cookie都是硬盘上的一个文件，所以颇有可能被用户删除；
（4）cookie安全性不够高。全部的cookie都是以纯文本的形式记录于文件中，所以若是要保存用户名密码等信息时，最好事先通过加密处理。 java
JS设置cookie:chrome
假设在A页面中要保存变量username的值("jack")到cookie中,key值为name，则相应的JS代码为：数据库
document.cookie = ‘name = ’+ username;json
JS读取cookie:
假设cookie中存储的内容为：name=jack;password=123
则在B页面中获取变量username的值的JS代码以下：
var username=document.cookie.split(";")[0].split("=")[1];
//JS操做cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
完整代码
//若是须要设定自定义过时时间,那么把上面的setCookie 函数换成下面两个函数就ok;
function setCookie(name, value, time) {
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
function getsec(str) {
alert(str);
var str1 = str.substring(1, str.length) * 1;
var str2 = str.substring(0, 1);
if (str2 == "s") {
return str1 * 1000;
} else if (str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if (str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
}
setCookie("name", "hayden");
alert(getCookie("name"));
//这是有设定过时时间的使用示例：
//s20是表明20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name", "hayden", "s20");
二、localStorage
1、什么是localstorage？
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来做为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中通常浏览器支持的是5M大小，这个在不一样的浏览器中localStorage会有所不一样。
2、localstorage的优点与局限
localStorage的优点
一、 localStorage拓展了cookie的4K限制
二、 localStorage会能够将第一次请求的数据直接存储到本地，这个至关于一个5M大小的针对于前端页面的数据库，相比于cookie能够节约带宽，可是这个倒是只有在高版本的浏览器中才支持的
localStorage的局限
一、 浏览器的大小不统一，而且在IE8以上的IE版本才支持localStorage这个属性
二、 目前全部的浏览器中都会把localStorage的值类型限定为string类型，这个在对咱们平常比较常见的JSON对象类型须要一些转换
三、 localStorage在浏览器的隐私模式下面是不可读取的
四、 localStorage本质上是对字符串的读取，若是存储内容多的话会消耗内存空间，会致使页面变卡
五、 localStorage不能被爬虫抓取到
localStorage与sessionStorage的惟一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空
三、localstorage的使用
这里要特别声明一下，若是是使用IE浏览器的话，那么就要UserData来做为存储，这里主要讲解的是localStorage的内容，因此userData不作过多的解释，并且以博主我的的见解，也是没有必要去学习UserData的使用来的，由于目前的IE6/IE7属于淘汰的位置上，并且在现在的不少页面开发都会涉及到HTML5\CSS3等新兴的技术，因此在使用上面通常咱们不会去对其进行兼容
首先在使用localStorage的时候，咱们须要判断浏览器是否支持localStorage这个属性
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
//主逻辑业务
}
localStorage的写入，localStorage的写入有三种方法
if(！window.localStorage){
alert("浏览器支持localstorage");
return false;
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
}
这里要特别说明一下localStorage的使用也是遵循同源策略的，因此不一样的网站直接是不能共用相同的localStorage
注意：存储进去的是int类型，可是打印出来倒是string类型，这个与localStorage自己的特色有关，localStorage只支持string类型的存储。
localStorage的读取
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.a=1;
//写入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
//第一种方法读取
var a=storage.a;
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);
}
这里面是三种对localStorage的读取，其中官方推荐的是getItem\setItem这两种方法对其进行存取，不要问我这个为何，由于这个我也不知道
我以前说过localStorage就是至关于一个前端的数据库的东西，数据库主要是增删查改这四个步骤，这里的读取和写入就至关于增、查的这两个步骤
下面咱们就来讲一说localStorage的删、改这两个步骤
改这个步骤比较好理解，思路跟从新更改全局变量的值同样，这里咱们就以一个为例来简单的说明一下
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);
console.log(storage.a);
// console.log(typeof storage["a"]);
// console.log(typeof storage["b"]);
// console.log(typeof storage["c"]);
/*分割线*/
storage.a=4;
console.log(storage.a);
}
这个在控制台上面咱们就能够看到已经a键已经被更改成4了
localStorage的删除
一、 将localStorage的全部内容清除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);
二、 将localStorage中的某个键值对删除
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);
localStorage的键获取
var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
使用key()方法，向其中出入索引便可获取对应的键。
4、localstorage的其余注意事项
通常咱们会将JSON存入localStorage中，可是在localStorage会自动将localStorage转换成为字符串形式
这个时候咱们可使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串
示例：
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
读取以后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法
var storage=window.localStorage;
var data={
name:'xiecanyong',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
三、sessionStorage
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问而且当会话结束后数据也随之销毁。所以sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。下面是其用法:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>SessionStorage</title>
<script type="text/javascript">
window.onload = function() {
//首先得到body中的3个input元素
var msg = document.getElementById("msg"); //文本框要输入的内容
var getData = document.getElementById("getData"); //获取数据
var setData = document.getElementById("setData"); //保存数据
var removeData = document.getElementById("removeData"); //移除数据
setData.onclick = function() //存入数据
{
if (msg.value) {
sessionStorage.setItem("data", msg.value); //把data对应的值保存到sessionStorage
alert("信息已保存到data字段中");
} else {
alert("信息不能为空");
}
}
getData.onclick = function() {
//获取数据
var msg = sessionStorage.getItem("data");
if (msg) {
alert("data字段中的值为：" + msg); //把data对应的值弹出来
} else {
alert("data字段无值！");
}
}
removeData.onclick = function() //移除数据
{
var msg = sessionStorage.getItem("data");
sessionStorage.removeChild(msg);
}
}
</script>
</head>
<body>
<input id="msg" type="text" />
<input id="setData" type="button" value="保存数据" />
<input id="getData" type="button" value="获取数据" />
<input id="removeData" type="button" value="移除数据" />
</body>
</html>
另外还有一点要注意的是，其余类型读取出来也要进行转换。
四、ApplicationCache
applicationCache是html5新增的一个离线应用功能
•离线浏览: 用户能够在离线状态下浏览网站内容。
•更快的速度: 由于数据被存储在本地，因此速度会更快.
•减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源。
在对应用进行缓存的时候须要一个manifest文件，
cache manifest 格式以下
首行必须是CACHE MANIFEST
接下来能够分为三段： CACHE， NETWORK，与 FALLBACK
CACHE:这是缓存文件中记录所属的默认段落。在 CACHE: 段落标题后(或直接跟在 CACHE MANIFEST 行后)列出的文件会在它们第一次下载完毕后缓存起来。NETWORK:在 NETWORK: 段落标题下列出的文件是须要与服务器链接的白名单资源。全部相似资源的请求都会绕过缓存，即便用户处于离线状态。可使用通配符。FALLBACK:FALLBACK: 段指定了一个后备页面，当资源没法访问时，浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源，第二个表示后备页面。两个 URI 都必须使用相对路径而且与清单文件同源。可使用通配符。
CACHE， NETWORK， 和 FALLBACK 段落能够以任意顺序出如今缓存清单文件中，而且每一个段落能够在同一清单文件中出现屡次。
applicationcache/
├── static/
│ ├── css/
│ │ └── example.css
│ └── js/
│ └── example.js
└── index.jsp
#代码以下
#example.css
#clock { font: 2em sans-serif; }
#example.js
window.onload = function(){
window.onload = function(){
setInterval(function(){
document.getElementById('clock').innerHTML = new Date();
},1000);
};
};
#index.jsp
<link type="text/css" href="static/css/example.css" rel="stylesheet"/>
<script src="static/js/example.js"></script>
<div id="clock"></div>
咱们加html5新增的神器manifest文件
文件添加在static文件夹下，文件内容以下
#example.manifest
CACHE MANIFEST
./js/example.js
../index.jsp
NETWORK:
./css/exmaple.css
这时须要修改index.jsp文件内容
<html> --> <html manifest="static/example.manifest">
文件说明对js和jsp进行缓存，而css文件则列入白名单不缓存，再次启动服务。。。。
访问的时候你看到的页面是没任何变化的，跟第一次访问的页面是一个鸟样的，不过你按下F12就会看到浏览器已经对的的文件进行缓存了
在resources->application cache选项下能够看到浏览器缓存的是什么东东，也可使用 chrome://appcache-internals/ 命令在Chrome浏览器中进行查看删除。
好了**奇迹的时刻到了，我再次把服务停了。。。。。。再次访问，居然能够访问到，不会像第一次那样提示挂了。
可是样式没了。。。那就是咱们刚刚把样式置为白名单了，没有缓存下来
若是你的manifest文件修改了，你能够手动或自动更新它
1.自动更新
浏览器除了在第一次访问 Web 应用时缓存资源外，只会在 cache manifest 文件自己发生变化时更新缓存。而 cache manifest 中的资源文件发生变化并不会触发更新。
2.手动更新
开发者也可使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，若是是 UPDATEREADY，那么能够调用 window.applicationCache.update() 更新缓存。示范代码以下。
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.update();
}
applicationCache状态值
UNCACHED(未缓存) 一个特殊的值，用于代表一个应用缓存对象尚未彻底初始化。
IDLE(空闲) 应用缓存此时未处于更新过程当中。
CHECKING(检查) 清单已经获取完毕并检查更新。
DOWNLOADING(下载中) 下载资源并准备加入到缓存中，这是因为清单变化引发的。
UPDATEREADY(更新就绪) 一个新版本的应用缓存可使用。有一个对应的事件 updateready，当下载完毕一个更新，而且还未使用 swapCache() 方法激活更新时，该事件触发，而不会是 cached 事件。
OBSOLETE(废弃) 应用缓存如今被废弃。
也能够在线状态检测
1.navigator.onLine
navigator.onLine 属性表示当前是否在线。若是为 true, 表示在线；若是为 false, 表示离线。当网络状态发生变化时，navigator.onLine 的值也随之变化。开发者能够经过读取它的值获取网络状态。
2.online/offline 事件
当开发离线应用时，经过 navigator.onLine 获取网络状态一般是不够的。开发者还须要在网络状态发生变化时马上获得通知，所以 HTML5 还提供了 online/offline 事件。当在线 / 离线状态切换时，online/offline 事件将触发在 body 元素上，而且沿着 document.body、document 和 window 的顺序冒泡。所以，开发者能够经过监听它们的 online/offline 事件来获悉网络状态。
- 1. cookie、sessionStorage和localStorage
- 2. Cookie、localStorage和sessionStorage
- 3. cookie，localStorage和sessionStorage
- 4. sessionStorage 、localStorage 和 cookie
- 5. 前端cookie、localStorage、sessionStorage缓存技术总结
- 6. Web前端存储之sessionStorage和localStorage
- 7. HTML5的LocalStorage和sessionStorage的使用 -缓存
- 8. localStorage和SessionStorage，Application，Cache缓存
- 9. cookie、session、sessionStorage和localStorage
- 10. cookie,session,sessionStorage和localStorage
- 更多相关文章...
- • 二级缓存的并发访问策略和常用插件 - Hibernate教程
- • W3C词汇和术语表 - 网站建设指南
- • 适用于PHP初学者的学习线路和建议
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. python的安装和Hello，World编写
- 2. 重磅解读：K8s Cluster Autoscaler模块及对应华为云插件Deep Dive
- 3. 鸿蒙学习笔记2（永不断更）
- 4. static关键字 和构造代码块
- 5. JVM笔记
- 6. 无法启动 C/C++ 语言服务器。IntelliSense 功能将被禁用。错误: Missing binary at c:\Users\MSI-NB\.vscode\extensions\ms-vsc
- 7. 【Hive】Hive返回码状态含义
- 8. Java树形结构递归（以时间换空间）和非递归（以空间换时间）
- 9. 数据预处理---缺失值
- 10. 都要2021年了，现代C++有什么值得我们学习的？
- 1. cookie、sessionStorage和localStorage
- 2. Cookie、localStorage和sessionStorage
- 3. cookie，localStorage和sessionStorage
- 4. sessionStorage 、localStorage 和 cookie
- 5. 前端cookie、localStorage、sessionStorage缓存技术总结
- 6. Web前端存储之sessionStorage和localStorage
- 7. HTML5的LocalStorage和sessionStorage的使用 -缓存
- 8. localStorage和SessionStorage，Application，Cache缓存
- 9. cookie、session、sessionStorage和localStorage
- 10. cookie,session,sessionStorage和localStorage