JS cookie
1、概述
- cookie也叫HTTP Cookie,最初是客户端与服务器端进行会话(Session)使用的。
- 如果没写expires,那么下次打开网页,cookie就会消失,这个就是会话机制
2、格式
- name=value; [expires=date]; [path=path]; [domain=somewhere.com];
[secure] - encodeURIComponent函数可以:将文本字符串编码为一个统一资源标识符 (URI) 的一个有效组件
- 上面的方法主要用于协议、主机名、路径或查询字符串
3、封装函数
设置cookie
function setCookie(name,value,day,path){
var cookieText=encodeURIComponent(name)+"="+encodeURIComponent(value); //encodeURIComponent
if(day>0){
var myDate=new Date();
myDate.setDate(myDate.getDate()+day);
cookieText+=";expires="+myDate;
}
if(path){
cookieText+=";path="+path;
}
document.cookie=cookieText;
}
获取cookie
function getCookie(name){
var i=document.cookie.indexOf(name);
if(i!=-1){
var start=i+name.length+1;
var end=document.cookie.indexOf(";",i);
if(end==-1){
end=document.cookie.length;
}
return document.cookie.substring(start,end);
}
}
删除cookie
function removeCookie(name){
var i=document.cookie.indexOf(name);
if(i!=-1){
var start=i+name.length+1;
var end=document.cookie.indexOf(";",i);
if(end==-1){
end=document.cookie.length;
}
let val=document.cookie.substring(start,end);
}
if(val!=undefined){
document.cookie=name+"="+val+";expires="+new Date(0);
}
}
cookie的特性
cookie自身局限性
- 条数上的限制,最多20条
- 大小上的限制,最多4k(4096字节)
- cookie安全性较低,不能存放敏感数据
- 带宽的浪费
- Cookie 通过在客户端记录信息确定用户身份, Session 通过在服务器端记录信息确定用户身份。
cookie 与 session 的区别
-
cookie 数据存放在客户的浏览器上,session 数据放在服务器上
-
考虑到安全应当使用 session
-
session会在一定时间内保存在服务器上。当访问增多,会比较占用你服务器的性能,考虑到减轻服务器性能方面,应当使用COOKIE。
localStorage
localStorage保存在缓存里,只有手工删除或者清理浏览器缓存方可失效。在容量上也有一些限制,主要看浏览器的差异,Firefox3+、IE8+、Opera为5M,,Chrome和Safari为2.5M
创建操作
方法一 : 通过属性操作
localStorage.name; // 读操作
localStorage.name="rose"; //写操作
方法二 : 通过方法操作
localStorage.getItem("uname") // 读操作
localStorage.setItem("uname","jack"); // 写操作
删除操作
localStorage.removeItem()
清空所有
localStrorage.clear()
sessionStorage的方法与localStorage的方法一模一样
- sessionStorage保存的数据只在用户浏览期间有效
- localStorage保存的数据长期有效
应用缓存
特点
- 离线浏览
- 提升页面渲染速度
- 减少服务器负载
步骤
- 创建一个后缀名为.appcache的文件
- CACHE MANIFEST…(需要加载的资源)
- 在html标签中添加manifest=“appcache文件的地址”(挂载)