使用 JavaScript 设置、读取和写入 Cookie

Setting, Reading and Writing Cookie with JavaScript

本文关键字：Cookie 读取 JavaScript 设置 使用      更新时间：2023-09-26

在这个例子中，我将通过提示询问用户的名字，然后在输入后使用cookie写给div，"欢迎，savedCookie！"，然后每次他们在到期前访问页面。

我

让浏览器显示一个提示，询问我的名字，然后它写给div 作为"欢迎，未定义！我不知道为什么会收到错误。

//Setting cookie for Users Name
function set_it() {
    var userName = prompt("Please Enter Your Name", ""),
      thetext = "name=" + userName,
      expdate = ";expires=Mon, 27 Mar 2017 13:00:00 UTC",
      newtext = encodeURIComponent(thetext);
    newtext += expdate;
    document.cookie = newtext;
  }
  //Reading & Writing cookie
function read_it() {
  var rawCookie = document.cookie;
  bakedCookie = decodeURIComponent(rawCookie);
  yumCookie = bakedCookie.split("=");
  document.getElementById("greeting").innerHTML = "<p>Welcome, " + yumCookie[1] + "!</p>";
}
if (document.cookie) {
  read_it();
} else {
  set_it();
  read_it();
}
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
</head>
<body>
  <div id="greeting">
    <script src="prjs13_2.js"></script>
  </div>
</body>
</html>

尝试在控制台中运行您唯一的此代码，看看您得到了什么-

 var userName = prompt("Please Enter Your Name", ""),
      thetext = "name=" + userName,
      expdate = ";expires=Mon, 27 Mar 2017 13:00:00 UTC",
      newtext = encodeURIComponent(thetext);
    newtext += expdate;
    document.cookie = newtext;
我

为"大卫"这个名字做了这件事，我得到了这个——

name%3Ddavid;expires=星期一， 27 Mar 2017 13：00：00 UTC"

当您设置 cookie 时，您的名称属性无效。试试这段代码（没有编码URIComponent和;而不是逗号）-

var userName = prompt("Please Enter Your Name", "");
var  thetext = "name=" + userName;
var expdate = ";expires=Mon, 27 Mar 2017 13:00:00 UTC";
var newtext = thetext;
document.cookie = newtext;
您可以使用

以下函数来获取/设置 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;
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
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);
        }
    }
}
这里有一些小提琴

的例子：小提琴

相关文章：