Cookie（会话跟踪技术）
是存储在浏览器中的缓存信息，Cookie是开发人员如今可以使用的最古老、最稳定的客户端存储形式，由W3C组织提出最早由Netscape社区发展的一种机制，由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份。
Cookie特性
- 可以跨域同域名下的多个网页，但不能跨域多个域名使用
- 存储空间限制允许4kb
- 默认情况下，浏览器没有限制可以拥有的Cookie数量（不同浏览器会有不同）
- 可以设置cookie过期时间
Cookie作用
实现客户端与服务器之间状态的保持
- 登录记录
- 多个页面的数据传递
- 保存用户信息
Cookie查看
document.cookie //返回cookie信息
也可以在Application -> storage -> Cookies
Cookie使用方法
key=value键值对;
document.cookie = "name=mingxin"; //会在原有的cookie后面追加而不会被覆盖
document.cookie= "name=mingxin,age=18";//设置多个cookie使用 ;隔开
默认cookie的结束时间是关闭浏览器的时候
cookie不能识别中文需要转码
encodeURICompoent( string ) 将中文编译成对应的字符
decodeURICompoent（ encodeURICompoent( string ) ） 将对应的字符转为中文
设置cookie常用属性
| 属性 | 描述 |
|---|---|
| name | 该Cookie的名称。Cookie一旦创建，名称便不可更改 |
| value | 该Cookie的值。如果值为Unicode字符，需要为字符编码。 |
| expires | 设置cookie的过期时间使用expires(确定的时间) |
| maxAge | max-age用秒来设置cookie的生存期(5*24*60*60)
|
| path | 允许Cookie的使用路径 |
| domain | 可以访问该Cookie的域名。 |
| secure | 该Cookie是否仅被使用安全协议传输。安全协议。默认为false<br />如果不设置字段 cookie 可以通过http,https 协议加载设置<br />如果设置这个字段, 那么只能通过https协议才能设置成 |
| HTTP-Only | HTTP-Only 背后的意思是告之浏览器该 cookie 绝不能通过 JavaScript 的 document.cookie属性访问 |
设置单个Cookie过期时间
以天为过期时间单位设置cookie
setDate()设置一个月的某一天
getDate()返回当前多少号（1~31）
toGMTString()把 Date 对象转换为字符串
getTime()返回1970/1/1至今的毫秒数1000 * 60 * 60 * 24*day //得到天的毫秒数
-
方法一
function setCookie(name,value,day){ let date = new Date(); data.setDate(date.getData()+day); //Mon Dec 14 2020 16:50:34 GMT+0800 (中国标准时间) //let expires= date.toGMTString(); //Mon, 14 Dec 2020 08:50:34 GMT let reg = new RegExp("[\\u4E00-\\u9FFF]+","g"); if(reg.test(value)) encodeURIComponent(valu); document.cookie = `${name}=${value},expires=${date}`; } setCookie("name","mingxin",1)
-
方法二
function setCookie(name,value,day){ let date = new Date().getTime(); let ms = day * 24 * 60 * 60 * 1000; let newTime = date + ms; let newDate = new Date(newTime); document.cookie=`${name}=${value};expires=${newDate}`; } setCookie("name","value",2) -
简化方法
function setCookie(obj){ let date = new Date().getTime() + obj.day*24*60*60*1000; let newDate = new Date(date); document.cookie=`${obj.prop}=${obj.value};expires=${newDate};` } setCookie({ prop:"username", value:"mingxin", day:1}) -
添加可选参数
function setCookie(name,value,{expires,path,domain}={}){ let cookieStr=encodeURIComponent(name)+"="+encodeURIComponent(value); if(expires){ cookieStr += ";expires=" + expiresDate(expires); } if(path){ cookieStr += ";path=" + path; } } //过期时间函数 function expiresDate(day){ let newDate = new Date(new Date().getTime() + day*24*60*60*1000); return newDate }; // setCookie("username","pwd123456",{expires:1,......})
设置的过期时间不能小于当前时间 否则cookie会理解被清除
设置多个cookie
function setCookie(data){
data.forEach((item,index)=>{
var date = new Date(new Date().getTime() + item.time*24*60*60*1000);
document.cookie = `${item.name }=${item.value};expires=${date}`;
})
}
setCookie([
{
name:'w',
value:18,
time:1
},{
name:'h',
value:19,
time:2
},{
name:'d',
value:20,
time:3
}
])
获取cookie
function getCookie(){
let cookies= document.cookie;
let cookiesArr=cookies.split(";")
}
二.WEB存储
| 本地存储 | |
|---|---|
| 优点 | 离线应用程序<br />直接访问数据<br />节省网络流量<br />服务器获取数据 |
| 缺点 | 没有任何同步支持<br />存储限制模糊 |
Storage:
是HTML5中新增的特性用来解决cookie存储空间不足的问题，Cookie存储的进化版，存储的值限定字符串需要通过JSON对象去转换，存储内容多的话会消化内容空间， IE8以下不兼容；
分为两个：
本地存储（localStorage）:
1.特点域内安全
2.数据多页面共享、
3.存储量限制5M-10M
4.会持久存在（除非被用户清除）
会话存储（sessionStorage) ：
1.临时会话，刷新不会消失，只要浏览器关闭就会消失
2.数据不能共享
API口诀："两个接口，四个函数“
两个接口：
sessionStoragelocalStorage四个函数：
setItemgetItemremoveItemclear
设置setItem()(键名，键值)：
（key,value)类型都是字符串
localStorage.setItem("name","mingxin"); //内置对象
//设置中文转码encodeURIComponent("名");
获取getItem():
读取已经存储在本地的数据，通过key作为参数夺取出对应key的数据
let data = localStorage.getItem("name");
移除removeItem():
移除已经存储在本地的数据，通过key作为参数删除对应key的数据
localStorage.removeItem("name");
移除本地所有数据getItem():
localStorage.clear();
传入一个对象
let obj = {
name:"mingxin",
age:18,
random:Math.florr(Math.random()*50)
}
localStorage.setItem("name",JSON.stringify(obj))
//获取
JSON.parse(localStorage.getItem("name"));
存储事件
当数据有修改或删除的情况下，就会触发storage事件
<span style="color:red">在对数据进行改变的窗口对象上是不会触发的(旧页面和新页面)</span>
storage对象常用属性：
| key | 修改或删除的key值，如果调用clear(),key为null |
|---|---|
| oldValue | 改变前的value值 |
| newValue | 新设置的值（改变后的值），如果调用removeStorage(),key为null |
| storageArea | 当前的storage对象 |
| url | 触发该脚本变化的文档的url(旧页面的url) 注：session同窗口才可以,例子：iframe操作 |
npm 里有封装好的库
window.addEventListener('storage',function(ev){
console.log(ev.key);
console.log(ev.newValue );
console.log(ev.oldValue );
console.log(ev.storageArea );
console.log(ev.url);
})
兼容问题
在老版本浏览器上，通过使用Cookies来做替代方案并做好域内安全。
三.离线存储（offline application）
HTML5 中可以让我们构建一个离线缓存的应用,离线存储是一个基于manifest文件（缓存清单文件，后缀名为.appcache/.manifest）的缓存机制，通过这个文件上的清单解析离线存储资源，这些资源就会像cookie一样被存储下来。之后当网络在处于离线状态时，浏览器就会通过被离线存储的数据进行页面展示，可以让我们构建一个离线缓存的应用。 cache缓存 manifest显示
离线缓存的优势：
1.可以配置需要缓存的资源
2.网络无连接应用扔可用
3.本地读取缓存资源,可以提升访问速度, 增强用户体验
4.减少请求,缓解服务器负担
缓存清单
缓存清单就是一个普通的文件，其中列出浏览器应该缓存的资源，以供离线的时候访问，一般使用.appcache/.manifest为后缀名。
缓存的使用 注：需结合服务器使用（常用服务器：IIS nginx apache）
html标签里使用缓存清单
<html lang="en" manifest="XXXXXX.manifest">
<html lang="en" manifest="XXXXXX.appcache">
缓存清单格式
- 顶行写 CACHE MANIFEST
- CACHE: 指定我们需要缓存的静态资源, 入css, image, js等
- NETWORK: (可选) 指定需要在线访问的资源, 可以使用通配符--无论缓存中是否存在，均从网络获取
- FALLBACK: (可选) 当被缓存的文件找不到时的备用资源
CACHAE MANIFEST //顶行
CACHE： //需要缓存哪些资源
./image/one.jpg
./image/two.jpg
./image/three.jpg
NETWORK: //指定需要在线访问的资源
* //*代表所有没有确定缓存的资源都不进行缓存
FALLBACK: //当被缓存的文件找不到时的备用资源
./image/four.jpg ./image/five.jpg //当four.jpg缓存资源丢失找不到-->启用备份five.jpg
可在浏览器Application-->Cache-->Application Cache 查看缓存
