js encodeURI 和 encodeURIComponent 的区别
介绍
1、可以设置过期时间
2、最大可以存储4KB，每一个域名下最多可以存储50条数据(不同的浏览器，有偏差)
注】只能字符串。一般只存储一些重要的信息。登录，购物车信息，是否点赞，视频播放进度等。
语法
格式： name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]，
name 键
value 值 都是自定义
【注】后续中括号的内容，都是可选项。
【注】火狐支持本地加载的文件缓存cookie，谷歌只支持服务器加载文件缓存cookie
encodeURIComponent 将中文编译成对应的字符
decodeURIComponent 将对应的字符编译成中文
- 设置一个cookie
document.cookie='name=value'
- 设置中文cookie
document.cookie = 'username=' + encodeURIComponent("名字");
- 获取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
let res =decodeURIComponent(getCookie('username'))
console.log(res);
- 设置有效期
expires：过期时间必须填写，日期对象
【注】系统会自动清除过期的cookie。
//获取n天后的日期的方法
function afterOfDate(n){
var d = new Date();
var day = d.getDate();
d.setDate(n + day);
return d;
}
//快速获取之前时间
new Date(0)
Thu Jan 01 1970 08:00:00 GMT+0800 (中国标准时间) {}
//示例（设置7天后过期）
document.cookie = "username=xxx;expires=" + afterOfDate(7);
//示例 （手动过期）
document.cookie = "username=;expires=" + new Date(0);
- path 限制访问路径
如果不去设置，默认是加载当前.html文件的路径
【注】我们设置的cookie的路径，和加载当前文件的路径，必须一致，如果不一致，cookie访问失败。 - domain 限制访问域名
如果不去设置，默认是加载当前.html文件的服务器域名/ip
【注】如果加载当前文件域名和设置的域名不一致，设置cookie失败。 - secure
如果不设置，设置cookie，可以通过http协议加载文件设置，也可以通过https协议加载文件设置
【注】设置这个字段以后，只能设置https协议加载cookie. - 示例
document.cookie = 'username=xxx;domain=' + "localhosx";
cookie 封装
- cookie.js
//name=value;[expires=date];[path=path];[domain=somewhere.com];[secure]，
/*
expires 传入对应天数
*/
function setCookie(name, value, {expires, path, domain, secure}){
var cookieStr = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if(expires){
cookieStr += ";expires=" + afterOfDate(expires);
}
if(path){
cookieStr += ";path=" + path;
}
if(domain){
cookieStr += ";domain=" + domain;
}
if(secure){
cookieStr += ";secure";
}
document.cookie = cookieStr;
}
//获取n天后的日期
function afterOfDate(n){
var d = new Date();
var day = d.getDate();
d.setDate(n + day);
return d;
}
function getCookie(name){
var cookieStr = decodeURIComponent(document.cookie);
var start = cookieStr.indexOf(name + "=");
if(start == -1){
return null;
}else{
//查询从start位置开始遇到的第一个分号
var end = cookieStr.indexOf(";", start);
if(end == -1){
end = cookieStr.length;
}
//进行字符串提取
var str = cookieStr.substring(start, end);
var arr = str.split("=");
return arr[1];
}
}
function removeCookie(name){
document.cookie = encodeURIComponent(name) + "=;expires=" + new Date(0);
}
/*
【注】在使用一个方法实现三个功能的时候。
通过传入参数的数量识别：
设置cookie
$cookie(name, value);
$cookie(name, value, {});
获取cookie
$cookie(name);
删除cookie
$cookie(name, null);
*/
function $cookie(name){
//判断传入参数的个数
switch(arguments.length){
case 1:
return getCookie(name);
break;
case 2:
if(arguments[1] == null){
removeCookie(name);
}else{
setCookie(name, arguments[1], {});
}
break;
default:
setCookie(name, arguments[1], arguments[2]);
break;
}
}
- html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src = 'cookie.js'></script>
<script>
//设置
$cookie("超级英雄", "钢铁侠");
$cookie("DC", "蝙蝠侠", {
expires: 7
});
$cookie("神话", "猪八戒", {
expires: 30
});
//获取
alert($cookie("超级英雄"));
alert($cookie("DC"));
alert($cookie("神话"));
//删除
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
$cookie("超级英雄", null);
alert($cookie("超级英雄"));
}
}
</script>
</head>
<body>
<button id = 'btn1'>删除cookie</button>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Document</title>
<script src = 'cookie.js'></script>
<script>
//设置
$cookie("超级英雄", "钢铁侠");
$cookie("DC", "蝙蝠侠", {
expires: 7
});
$cookie("神话", "猪八戒", {
expires: 30
});
//获取
alert($cookie("超级英雄"));
alert($cookie("DC"));
alert($cookie("神话"));
//删除
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
$cookie("超级英雄", null);
alert($cookie("超级英雄"));
}
}
</script>
</head>
<body>
<button id = 'btn1'>删除cookie</button>
</body>
</html>
网友评论