个人中心
gpt4 book ai didi

javascript - 使用 JavaScript Cookie 的建议

转载 作者：行者123 更新时间：2023-11-28 15:25:31 25 4
gpt4 key购买 nike

我正在尝试学习 JavaScript 中的 cookie。我已经可以将文本保存为 cookie 并在另一个页面上查看 cookie 中的内容。

我现在想做的是制作另一个盒子，就像我以前的盒子一样，但在这个盒子里我想输入 rgb 颜色代码，这将为 cookie 页面 2 提供已保存在 cookie 中的颜色用户。希望您能理解我的问题并能尽可能地帮助我。

这是我的代码:

Cookie 第 1 页:

<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width">
<meta charset="utf-8">

<title>Cookies side 1</title>

</head>

<body>

<nav>
<ul>
    <li><a href="cookies1.html">Cookies 1</a></li>
    <li><a href="cookies2.html">Cookies 2</a></li>
</ul>
</nav>

<section id="cookieadmin">
<h3>Save/Delete a cookie</h3>
<label>Write a text
    <input id="textTxt" type="text" placeholder="...write here">
</label>
<input id="saveCookieBtn" type="button" value="Save cookie">
<input id="deleteCookieBtn" type="button" value="Delete cookie">
<p id="cookiestatus"></p>
</section>

<script>
(function(){

var textTxt;
var saveCookieBtn, deleteCookieBtn;
var cookiestatus;

function init(){
    setHTMLObjects();
    setEvents();

    checkIfCookieExists();
}
function setEvents(){
    saveCookieBtn.addEventListener("click", saveCookie);        
    deleteCookieBtn.addEventListener("click", deleteCookie);
}
function deleteCookie(){
    var dateObject = new Date();
    dateObject.setDate(dateObject.getDate() - 1);

    document.cookie = "text=;expires=" + dateObject.toUTCString();

    checkIfCookieExits();
}
function saveCookie(){
    var dateObject = new Date();
    dateObject.setDate(dateObject.getDate() + 7);

    document.cookie = "text=" + textTxt.value + ";expires=" + dateObject.toUTCString();

    checkIfCookieExists();
}
function setHTMLObjects(){
    textTxt = document.getElementById("textTxt");
    saveCookieBtn = document.getElementById("saveCookieBtn");
    deleteCookieBtn = document.getElementById("deleteCookieBtn");
    cookiestatus = document.getElementById("cookiestatus");
}

function checkIfCookieExists(){
    var message;


    if(document.cookie){
        message = "Cookie exists";
    }else
    {
        message = "Cookie does not exist";
    }

    cookiestatus.innerHTML = message;
}

window.onload = init;
}())
</script>

</body>
</html>

Cookie 第 2 页:

<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width">
<meta charset="utf-8">

<title>Cookie 2s</title>

</head>

<body>

<nav>
<ul>
    <li><a href="cookies1.html">Cookies 1</a></li>
    <li><a href="cookies2.html">Cookies 2</a></li>
</ul>
</nav>

<p id="cookiestatus"></p>
<script>
(function(){

var cookiestatus;
function init(){
    setHTMLObjects();
    checkIfCookieExists();
}
function setHTMLObjects(){
    cookiestatus = document.getElementById("cookiestatus");
}
function checkIfCookieExists(){
    var message;
    if(document.cookie){

        var cookielist = document.cookie.split("=");
        var value = cookielist[1];

        message = "Cookie exists: " + value;
    }else
    {
        message = "Cookie does not exist";
    }
    cookiestatus.innerHTML = message;
}
window.onload = init;
}())
</script>

</body>
</html>

最佳答案

您可以创建一个文本框输入元素，用户可以在其中输入该页面所需的十六进制颜色值，并将其值存储为 cookie。由于您已经拥有处理 cookie 设置和获取的函数，下面是一个如何检索颜色值的示例。

var input = document.getElementById("colorInput");
input.addEventListener("keydown", function() {
  setTimeout(function() {
    document.getElementById("value").innerHTML = input.value;
    }, 500);
});
<input id="colorInput" type="text" />
<p>Input value: <span id="value"></span></p>

您还必须对输入值添加某种验证检查，以确保它是正确的十六进制值。至于 cookie 本身，您可以将不同页面的所有颜色存储为根级别的字符串化 JSON 对象，或者在每个页面级别设置不同的 cookie，在这种情况下请注意您为每个页面使用的名称。

编辑:

我做了一个demo您的代码如何工作。这是每个页面的代码。

第 1 页:

<html>

<head>

<meta name="viewport" content="width=device-width">
<meta charset="utf-8">

<title>Cookies side 1</title>

</head>

<body>

<nav>
<ul>
    <li><a href="cookies1.html">Cookies 1</a></li>
    <li><a href="cookies2.html">Cookies 2</a></li>
</ul>
</nav>

<section id="cookieadmin">
<h3>Save/Delete a cookie</h3>
<label>Write a text
    <input id="textTxt" type="text" placeholder="...write here">
</label>
<input id="saveCookieBtn" type="button" value="Save cookie">
<input id="deleteCookieBtn" type="button" value="Delete cookie">
<input id="colorInput" type="text" />
<input id="saveColorBtn" type="button" value="Save color" /><span id="valMsg"></span>
<p>Input color: <span id="colorValue">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p>
<p id="cookiestatus"></p>
</section>

<script>

function init() {
    setHTMLObjects();
    setEvents();
    checkIfCookieExists();
}

function setEvents() {
    saveCookieBtn.addEventListener("click", saveCookie);        
    deleteCookieBtn.addEventListener("click", deleteCookie);
    saveColorBtn.addEventListener("click", saveColor);
}

function deleteCookie() {
    var dateObject = new Date();
    dateObject.setDate(dateObject.getDate() - 1);
    document.cookie = "text=;expires=" + dateObject.toUTCString();
    checkIfCookieExits();
}

function saveCookie() {
    var dateObject = new Date();
    dateObject.setDate(dateObject.getDate() + 7);
    document.cookie = "text=" + colorInput.value + ";expires=" + dateObject.toUTCString();
    checkIfCookieExists();
}

function setHTMLObjects(){
    textTxt = document.getElementById("textTxt");
    saveCookieBtn = document.getElementById("saveCookieBtn");
    deleteCookieBtn = document.getElementById("deleteCookieBtn");
    cookieStatus = document.getElementById("cookiestatus");
    colorInput = document.getElementById("colorInput");
    colorValue = document.getElementById("colorValue");
    saveColorBtn = document.getElementById("saveColorBtn");
    valMsg = document.getElementById("valMsg");
}

function checkIfCookieExists() {
    var message;
    if (document.cookie) {
        message = "Cookie exists";
    } else {
        message = "Cookie does not exist";
    }
    cookiestatus.innerHTML = message;
}

function saveColor() {
    var color = colorInput.value,
        msg;
    if( isHex(color) ) {
        color = '#'+color;
        msg = '<em style="color:green;">Valid hex value!</em>';
        colorValue.innerHTML = color;
        document.body.style.background = color;
        saveCookie();
    } else {
        colorInput.value = '';
        msg = '<em style="color:red;">Invalid hex value!</em>';
    }
    valMsg.innerHTML = msg;
    setTimeout(function() {
        valMsg.innerHTML = "";
    }, 5000);
}

function isHex(str) {
    /* Author: Royi Namir
     * Ref: http://stackoverflow.com/questions/8027423/how-to-check-if-a-string-is-a-valid-hex-color-representation#answer-8027444
    */
    var isHex = /(^[0-9A-F]{6}$)|(^[0-9A-F]{3}$)/i.test(str);
    return isHex;
}

var saveCookieBtn, deleteCookieBtn, saveColorBtn, cookiestatus, colorInput;

window.addEventListener("load", init, false);

第 2 页:

<!doctype html>

<html>

<head>

<meta name="viewport" content="width=device-width">
<meta charset="utf-8">

<title>Cookie 2s</title>

</head>

<body>

<nav>
<ul>
    <li><a href="cookies1.html">Cookies 1</a></li>
    <li><a href="cookies2.html">Cookies 2</a></li>
</ul>
</nav>

<p id="cookiestatus"></p>
<script>
(function(){

var cookiestatus;
function applyCookieColor() {
    var color = getCookie();
    // Change text color of element
    elemColor.style.color = color;
    // OR change background color of element
    elemColor.style.backgroundColor = color;
}
function init(){
    setHTMLObjects();
    checkIfCookieExists();
    applyCookieColor();
}
function setHTMLObjects(){
    cookiestatus = document.getElementById("cookiestatus");
    elemColor = document.getElementById("elemColor");
}
function checkIfCookieExists(){
    var message;
    if(document.cookie){

        var cookielist = document.cookie.split("=");
        var value = cookielist[1];

        message = "Cookie exists: " + value;
    }else
    {
        message = "Cookie does not exist";
    }
    cookiestatus.innerHTML = message;
}
function getCookie() {
    /* code to get the cookie */
}

window.onload = init;
}());
</script>

</body>
</html>

注意:要使第 2 页中的 JS 代码正常工作，您需要完成 getCookie() 函数，我将其留空是因为我假设您已经掌握了它。

编辑 2:

我在 https://developer.mozilla.org 中找到了一个非常完整的 cookie 处理脚本地点。您应该将其用于 cookie 处理。

JS:

/*\
|*|
|*|  :: cookies.js ::
|*|
|*|  A complete cookies reader/writer framework with full unicode support.
|*|
|*|  Revision #1 - September 4, 2014
|*|
|*|  https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
|*|  https://developer.mozilla.org/User:fusionchess
|*|
|*|  This framework is released under the GNU Public License, version 3 or later.
|*|  http://www.gnu.org/licenses/gpl-3.0-standalone.html
|*|
|*|  Syntaxes:
|*|
|*|  * docCookies.setItem(name, value[, end[, path[, domain[, secure]]]])
|*|  * docCookies.getItem(name)
|*|  * docCookies.removeItem(name[, path[, domain]])
|*|  * docCookies.hasItem(name)
|*|  * docCookies.keys()
|*|
\*/

var docCookies = {
  getItem: function (sKey) {
    if (!sKey) { return null; }
    return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
  },
  setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
    if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
    var sExpires = "";
    if (vEnd) {
      switch (vEnd.constructor) {
        case Number:
          sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
          break;
        case String:
          sExpires = "; expires=" + vEnd;
          break;
        case Date:
          sExpires = "; expires=" + vEnd.toUTCString();
          break;
      }
    }
    document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
    return true;
  },
  removeItem: function (sKey, sPath, sDomain) {
    if (!this.hasItem(sKey)) { return false; }
    document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
    return true;
  },
  hasItem: function (sKey) {
    if (!sKey) { return false; }
    return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
  },
  keys: function () {
    var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
    for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
    return aKeys;
  }
};

关于javascript - 使用 JavaScript Cookie 的建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27581731/

25 4 0
文章推荐： html - Bootstrap 中的 DropDown 子菜单不起作用
文章推荐： ios - 是否可以在 iOS MapKit 中加载 "blank" map ？
文章推荐： jquery - 在 Rate Yo 插件中悬停在星星上需要工具提示
文章推荐： ios - 如何将 AWS DynamoDB 与数据集 ios swift 同步？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com