cookie的添加，删除，以及使用

下图为简单的网页界面

cookie的添加，删除，以及使用

通过添加cookie的名字，值，属性来设置cookie

通过输入cookie的名字来打印cookie的值

通过输入要删除cookie的名字来删除cookie

以下为html

<input id="cookiename" type="text" placeholder="cookie名字"><br/>
<input id="cookiezhi" type="text" placeholder="cookie值"><br/>
<input id="cookietime" type="text" placeholder="cookie时间"><br/>
<input id="import" type="button" value="输入"><br/>
<input id="cookienameTwo" style="height: 18px" type="text"placeholder="输入要打印的对应cookie名字"><br>
<input id="print" type="button" value="打印">
<p></p><br/>
<input id="deletetext" type="text" placeholder="输入要删除的cookie值">
<input id="deleteinput" type="button" value="删除">

以下为js

//先将html中的input标签挨个获取
let cName=document.getElementById("cookiename");
let cNhi=document.getElementById("cookiezhi");
let cTime=document.getElementById("cookietime");
let cImport=document.getElementById("import");
let cNameTwo=document.getElementById("cookienameTwo");
let cPrint=document.getElementById("print");
let p1=document.getElementsByTagName("p")[0];
let deleteText=document.getElementById("deletetext");
let deleteInput=document.getElementById("deleteinput");
//设置输入按钮的单击事件，通过单击输入按钮，将对于的cookie名字，值和时间添加
cImport.addEventListener("click",function () {
    cookieDsut(cName.value,cNhi.value,cTime.value);
});
//设置输出按钮的单击事件，通过单击输出按钮，将对于的cookie名字的值打印出来
cPrint.addEventListener("click",function () {
    p1.innerText=cookieUdt(cNameTwo.value);
});
//设置删除按钮的单击事件，通过单击删除按钮，将对应的cookie名字的cookie删除
deleteInput.addEventListener("click",function () {
    cookieDelete(deleteText.value);
});
//将传入的名字，值，时间加入cookie中
function cookieDsut(name,value,myTime) {
    let oDate = new Date();
    oDate.setFullYear(oDate.getFullYear()+parseInt(myTime));
    document.cookie=name+"="+value+";expires="+oDate;
    console.log(document.cookie);
}
//将传入名字对应的cookie的值返回
function cookieUdt(tkvalue) {
    let arr=document.cookie.split(";");
    for (let t=0;t<arr.length;t++){
        let arrPusp =arr[t].split("=");
        if (arrPusp[0].trim()==tkvalue){
            return arrPusp[1];
        }
    }
}
//删除cookie
function cookieDelete(name) {
    let exp=new Date();
    exp.setDate(exp.getDate()-1);
    document.cookie=name+"="+cookieUdt(name)+";expires="+exp;
}

cookie的添加，删除，以及使用

相关推荐