cookie 小妙招
注意注意： 调试cookie时 必须在 真实的服务器之下，自己本地的路径是没有cookie的
必须自己弄个本地服务器
前端开服务器：https://blog.csdn.net/weixin_41618917/article/details/113355152
先来一个小案例
使用背景：
如果用户是第一次进入项目，(此时cookie里没有值)
点击登录按钮判断当前cookie里是否存有手机号，如果没有手机号，就将手机号存入cookie，如果有手机号就直接登录。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
</style>
</head>
<body>
<div >
<span>手机号：</span>
<input type="text" id="phone" placeholder="输入要存进cookie的手机号">
<div onclick="copyText()">登录</div>
</div>
<script>
function copyText(){
const phone = this.getCookie('phone')
if(phone){
// 如果有 phone 这个cookie名 直接登录
alert('登录成功')
}else{
let phoneValue= document.getElementById("phone").value
this.setCookie('phone',phoneValue ,1)
alert("已存进cookie")
}
}
function setCookie(key, val, days){
var d = new Date()
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000)
var expires = d.toGMTString()
document.cookie = key + "=" + val + ";expires=" + expires
}
function getCookie(name){
var arr=document.cookie.split('; ') //多个cookie值是以; 分隔的，用split把cookie分割开并赋值给数组
if(arr && arr.length > 0) {
for(var i=0;i<arr[i].length;i++){ //历遍数组
var arr2=arr[i].split('=') //原来割好的数组是：user=simon，再用split('=')分割成：user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon
if(arr2[0]==name){ //如果数组的属性名等于传进来的name
return arr2[1] //就返回属性名对应的值
}
}
}
return '' //没找到就返回空
}
function clearAllCookie() {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
if(keys) {
for(var i = keys.length; i--;)
document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
}
}
window.onload = function(){
// 为了有缓存先清一遍
clearAllCookie()
}
</script>
</body>
方法合集：
清除所有cookie
clearAllCookie() {
var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
if(keys) {
for(var i = keys.length; i--;)
document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
}
},
设置cookie
代码如下（示例）：
setCookie(key, val, days){
var d = new Date()
// 注意 时间不是按照天数 请修改
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000)
var expires = d.toGMTString()
document.cookie = key + "=" + val + ";expires=" + expires
},
// 调用
this.setCookie("cookie名",this.phonenumber ,1) // this.phonenumber 是data里的值;1是 1天
得到 cookie
代码如下（示例）：
getCookie(name){
var arr=document.cookie.split('; ') //多个cookie值是以; 分隔的，用split把cookie分割开并赋值给数组
if(arr && arr.length > 0) {
for(var i=0;i<arr[i].length;i++){ //历遍数组
var arr2=arr[i].split('=') //原来割好的数组是：user=simon，再用split('=')分割成：user simon 这样可以通过arr2[0] arr2[1]来分别获取user和simon
if(arr2[0]==name){ //如果数组的属性名等于传进来的name
return arr2[1] //就返回属性名对应的值
}
}
}
return '' //没找到就返回空
},
//调用
if (this.getCookie("cookie名")){
// 如果这个 cookie名 存在时，
}else{
// 不存在时
}
设置cookie
代码如下（示例）：
setCookie(key, val, days){
var d = new Date()
// 注意 时间不是按照天数 请修改
d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000)
var expires = d.toGMTString()
document.cookie = key + "=" + val + ";expires=" + expires
},
// 调用
this.setCookie("cookie名",this.phonenumber ,1) // this.phonenumber 是data里的值;1是 1天
删除cookie （如果不需要点击去删除cookie，则不用调用该方法，cookie到时间会自动清除）
代码如下（示例）：
removeCookie(name){
setCookie(name, 1, -1) //-1就是告诉系统已经过期，系统就会立刻去删除cookie
},
// 调用
this.removeCookie("cookie名")
╭(╯^╰)╮好饿，但是不想动
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
