cookie的概述
1.localStorage是html5新增。
- 本地储存使用的
- 永久储存
- 浏览器支持储存5M大小
2.cookie的概念:
- Cookie又叫会话跟踪技术是由web服务器保存再用户浏览器上的小文件本
- web服务器保存
- 关闭浏览器===会话结束
3.cookie的特点
- 禁用cookie,无法正常登录。
- cookie与浏览器相关,不同的浏览器之间的cookie不能互相访问。
- cookie可以被删除。
- cookie储存的也是字符串。
- cookie自由设置过期时间(储存多长时间)
- cook储存4K大小
- document.cookie(document来调用)
cookie的存储
1.储存cookie , docuement.cookie 一条条储存,键值对(key=value),如果key相同,覆盖
document.cookie = "name=zhangsan";
document.cookie = "age=100";
document.cookie = "sex=男";
2.存储带有过期时间的cookie
let d = new Date();//获取当前的日期
//alert(d.getDate());//4 获取当天是多少号
d.setDate(d.getDate()+10);//获取当前的日期+10;在设置回去;
document.cookie="name=zhangsan;expires="+d;//expires:设置过期日期;
3.储存cookie的函数封装
// encodeURIComponent();//对文本框输入的值进行编码,中文,特殊字符编码结果是%加上这些符号的ASCII码十六进制对照表。
// decodeURIComponent();//输入的值进行解码
function addcookie(key, value, days) {
let d = new Date();
d.setDate(d.getDate() + days);
document.cookie = `${key}=${encodeURIComponent(value)};expires=${d}`;
}
addcookie("name", "张三", 7);
addcookie("age", "100", 7);
addcookie("sex", "男", 7);
cookie的获取
1.获取cookie–document.cookie获取全部的cookie
目标:传入key,放回key对应的value
alert(document.cookie);//name=%E5%BC%A0%E4%B8%89; sge=100; sex=%E7%94%B7;
console.log(decodeURIComponent(document.cookie));//name=张三; sge=100; sex=男
//获取的全部是cookie中间通过分号和空格连接起来的。("; ")
console.log(decodeURIComponent(document.cookie).split("; "));//利用分号和空格进行拆分
["name=张三, sge=100, sex=男"];
2.通过封装函数来获取cookie中的某个值
function getcookie(key) {
let cookiearr = decodeURIComponent(document.cookie).split('; ');
//console.log(cookiearr);//["name=张三", "sge=100", "sex=男"]
for (let i = 0; i < cookiearr.length; i++) {
let newarr = cookiearr[i].split('=');
if (key === newarr[0]) {
return newarr[1];
}
}
}
console.log(getcookie("name"));//张三
console.log(getcookie("age"));//100
console.log(getcookie("sex"));//男
cookie的删除
- 删除cooki-将cookie的过期时间设为一个已经过去的时间。
- 思路:添加cookie的时候key的值相同,会覆盖;
- addcookie(“name”,"",-1);addcookie(“name”,"",-1);
封装
function delcookie(key){
addcookie(key,"",-1);
}
delcookie("name");//删除为name的cookie数据;
综合封装
let jscookie = {
add: function (key, value, days) {
let d = new Date();
d.setDate(d.getDate() + days);
document.cookie = `${key}=${encodeURIComponent(value)};expires=${d}`;
}
,
get: function (key) {
let cookiearr = decodeURIComponent(document.cookie).split('; ');
//console.log(cookiearr);//["name=张三", "sge=100", "sex=男"]
for (let i = 0; i < cookiearr.length; i++) {
let newarr = cookiearr[i].split('=');
if (key === newarr[0]) {
return newarr[1];
}
}
}
,
del: function (key) {
jscookie.add(key, '', -1);
}
}
jscookie.del("age");//删除名为age的cookie数据;