집 > 기사 > 웹 프론트엔드 > 자바스크립트 쿠키를 삭제하는 방법

자바스크립트 쿠키를 삭제하는 방법

藏色散人원래의: 2021-04-27 09:44:0940531검색

JavaScript에서 쿠키를 삭제하는 방법: 먼저 "setCookie"를 통해 쿠키를 설정한 다음 "getCookie"를 통해 쿠키를 가져온 다음 마지막으로 "clearCookie"를 통해 쿠키를 삭제합니다.

자바스크립트 쿠키를 삭제하는 방법

이 문서의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JS는 쿠키를 설정하고 쿠키를 삭제합니다

js에서 쿠키를 설정하는 방법에는 여러 가지가 있습니다.

첫 번째 유형: (w3c 공식 웹사이트의 코드입니다.)

<script>
//设置cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(&#39;;&#39;);
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==&#39; &#39;) c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}
//清除cookie  
function clearCookie(name) {  
    setCookie(name, "", -1);  
}  
function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);
        }
    }
}
checkCookie(); 
</script>

두 번째 유형:

<script>
//JS操作cookies方法!
//写cookies
function setCookie(c_name, value, expiredays){
 　　　　var exdate=new Date();
　　　　exdate.setDate(exdate.getDate() + expiredays);
　　　　document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
 　　}
 
//读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
 
    if(arr=document.cookie.match(reg))
 
        return (arr[2]);
    else
        return null;
}
//删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie(&#39;username&#39;,&#39;Darren&#39;,30) 
alert(getCookie("username"));
</script>

세 번째 예

<html> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <head> 
        <script language="JavaScript" type="text/javascript"> 
            
            function addCookie(objName, objValue, objHours){//添加cookie 
                var str = objName + "=" + escape(objValue); 
                if (objHours > 0) {//为0时不设定过期时间，浏览器关闭时cookie自动消失 
                    var date = new Date(); 
                    var ms = objHours * 3600 * 1000; 
                    date.setTime(date.getTime() + ms); 
                    str += "; expires=" + date.toGMTString(); 
                } 
                document.cookie = str; 
                alert("添加cookie成功"); 
            } 
            
            function getCookie(objName){//获取指定名称的cookie的值 
                var arrStr = document.cookie.split("; "); 
                for (var i = 0; i < arrStr.length; i++) { 
                    var temp = arrStr[i].split("="); 
                    if (temp[0] == objName) 
                        return unescape(temp[1]); 
                } 
            } 
            
            function delCookie(name){//为了删除指定名称的cookie，可以将其过期时间设定为一个过去的时间 
                var date = new Date(); 
                date.setTime(date.getTime() - 10000); 
                document.cookie = name + "=a; expires=" + date.toGMTString(); 
            } 
            
            function allCookie(){//读取所有保存的cookie字符串 
                var str = document.cookie; 
                if (str == "") { 
                    str = "没有保存任何cookie"; 
                } 
                alert(str); 
            } 
            
            function $(m, n){ 
                return document.forms[m].elements[n].value; 
            } 
            
            function add_(){ 
                var cookie_name = $("myform", "cookie_name"); 
                var cookie_value = $("myform", "cookie_value"); 
                var cookie_expireHours = $("myform", "cookie_expiresHours"); 
                addCookie(cookie_name, cookie_value, cookie_expireHours); 
            } 
            
            function get_(){ 
                var cookie_name = $("myform", "cookie_name"); 
                var cookie_value = getCookie(cookie_name); 
                alert(cookie_value); 
            } 
            
            function del_(){ 
                var cookie_name = $("myform", "cookie_name"); 
                delCookie(cookie_name); 
                alert("删除成功"); 
            } 
        </script> 
    </head> 
    <body> 
        <form name="myform"> 
            <div> 
                <label for="cookie_name"> 
                    名称 
                </label> 
                <input type="text" name="cookie_name" /> 
            </div> 
            <div> 
                <label for="cookie_value"> 
                值 
                </lable> 
                <input type="text" name="cookie_value" /> 
            </div> 
            <div> 
                <label for="cookie_expireHours"> 
                多少个小时过期 
                </lable> 
                <input type="text" name="cookie_expiresHours" /> 
            </div> 
            <div> 
                <input type="button" value="添加该cookie" onclick="add_()"/><input type="button" value="读取所有cookie" onclick="allCookie()"/><input type="button" value="读取该名称cookie" onclick="get_()"/><input type="button" value="删除该名称cookie" onclick="del_()"/> 
            </div> 
        </form> 
</body> 
</html>

참고:

Chrome 브라우저는 로컬에서 쿠키를 얻을 수 없습니다. 서버에 있어야 합니다. 로컬인 경우 로컬 www 디렉터리에 넣을 수 있습니다.

Google Chrome은 온라인 웹사이트에서 쿠키 읽기 및 쓰기만 지원하며 로컬 HTML에서의 쿠키 작업은 금지됩니다. 따라서 로컬 html 파일에 다음 코드를 작성하면 팝업 대화 상자의 내용이 비어 있게 됩니다.

document.cookie = "Test=cooo";
alert(document.cookie);

이 페이지가 온라인 웹사이트의 콘텐츠인 경우 쿠키 콘텐츠 Test=cooo 등이 정상적으로 표시됩니다.

【추천 학습: javascript 고급 튜토리얼】

위 내용은 자바스크립트 쿠키를 삭제하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript chrome html Cookie JS

성명：

이전 기사：Angular의 형태에 대해 자세히 알아보기다음 기사：Angular의 형태에 대해 자세히 알아보기