Fatal编程技术网
  • javascript/
  • Javascript 记录整个站点的用户首选项的Cookie或会话变量

Javascript 记录整个站点的用户首选项的Cookie或会话变量

javascript cookies

Javascript 记录整个站点的用户首选项的Cookie或会话变量,javascript,cookies,Javascript,Cookies,我正在尝试设置cookie或会话变量，以使网站上的用户首选项保留在网站的每个页面上，我正在尝试使用Javascript来实现这一点，但我愿意尝试任何有效的代码 我想让我的onclick用户选项在用户会话期间在网站的每个页面上保持活动状态。因此，如果他们导航到第2页，他们从第1页选择的布局将被记住，并在第2页保持活动状态 我正在构建的基本上是一个网站上的电子阅读器，因此我希望用户能够更改字体大小、更改背景颜色和更改文本宽度，以满足他们的喜好。我已经完成了所有的工作，但是当他们点击下一页时，设置被清

我正在尝试设置cookie或会话变量，以使网站上的用户首选项保留在网站的每个页面上，我正在尝试使用Javascript来实现这一点，但我愿意尝试任何有效的代码

我想让我的onclick用户选项在用户会话期间在网站的每个页面上保持活动状态。因此，如果他们导航到第2页，他们从第1页选择的布局将被记住，并在第2页保持活动状态

我正在构建的基本上是一个网站上的电子阅读器，因此我希望用户能够更改字体大小、更改背景颜色和更改文本宽度，以满足他们的喜好。我已经完成了所有的工作，但是当他们点击下一页时，设置被清除，他们必须重新设置。我希望网站记住他们在网站上的整个会话或一段时间的选择，即使这是可能的

我对Javascript非常陌生（这是我写Javascript的第一天），所以下面的代码可能非常糟糕

我不知道我是否需要使用cookie或会话变量，但我发现的所有修复要么不起作用，要么不是真正用于此目的，因此我无法使用它们

在我创建的代码中，当用户单击“story”div上方的选项时，“story”div中的所有内容都会发生变化，选项包括：

  • 放大字体
  • 收缩字体
  • 黑暗主题
  • 轻主题
  • 乌贼墨主题
  • 全宽
  • 75%宽度
  • 50%宽度
到目前为止，这一切都是可行的，但如果用户导航到另一个页面，我无法让它与用户保持一致。当他们点击下一个页面时，他们的偏好就清晰了，这就是问题所在

这是我现在的代码

HTML：

 <html>
 <head>
  <title>Test</title>
  <script type="text/javascript" src="cookies.js"></script>
  <script type="text/javascript" src="customize.js"></script>

 <style>
.text-tools{margin:auto; text-align:center;}
 </style>
 </head>
 <body>
 <div class="text-tools">
<img id="plustext" alt="Increase text size" src="images/A-plus.png" onclick="resizeText(1)" style="width:25px;" />
<img id="minustext" alt="Decrease text size" src="images/A-minus.png" onclick="resizeText(-1)" style="width:25px;" />
<a href="#" onclick="dark()"><img src="images/dark.png" style="width:25px;" /></a>
<a href="#" onclick="light()"><img src="images/light.png" style="width:25px;" /></a>
<a href="#" onclick="sepia()"><img src="images/sepia.png" style="width:25px;" /></a>
<a href="#" onclick="full()"><img src="images/full.png" style="width:25px;" /></a>
<a href="#" onclick="third()"><img src="images/third.png" style="width:25px;" /></a>
<a href="#" onclick="half()"><img src="images/half.png" style="width:25px;" /></a>
</div>
<div id="story">
<div id="sfont">
<div id="sbg">
<div id="stext">
<h1 id="chtitle">The Title</h1>
<p style="font-size:1em;font-color:#000;"><span id="cap1" style="font-size:2em;">S</span>ome text goes here...</p>
<a href="page2.html">Page Two</a>
</div>
</div>
</div>
</div>
<p>Other stuff here</p>

 </body>
</html>


试验
.text工具{边距：自动；文本对齐：居中；}
标题
这里有一些文字

这里还有其他东西
自定义Javascript：

    // Change font size
function resizeText(multiplier) {
  if (document.getElementById("sfont").style.fontSize == "") {
    document.getElementById("sfont").style.fontSize = "1.0em";
  }
  document.getElementById("sfont").style.fontSize = parseFloat(document.getElementById("sfont").style.fontSize) + (multiplier * 0.2) + "em";
}

//Change background color
<!--//

function dark()

{
document.getElementById("sbg").style.backgroundColor="#474747"
document.getElementById("stext").style.color="#cdcdcd"
document.getElementById("chtitle").style.color="#e5e5e5"
document.getElementById("cap1").style.color="#e5e5e5"
}

function light()

{
document.getElementById("sbg").style.backgroundColor="#ffffff"
document.getElementById("stext").style.color="#8C9398"
document.getElementById("chtitle").style.color="#686868"
document.getElementById("cap1").style.color="#686868"
}

function sepia()

{
document.getElementById("sbg").style.backgroundColor="#c1b29b"
document.getElementById("stext").style.color="#77674f"
document.getElementById("chtitle").style.color="#564a36"
document.getElementById("cap1").style.color="#564a36"

}

//Change div width
function full()

{
document.getElementById('story').setAttribute("style","width:100%;margin:auto");
}

function third()

{
document.getElementById('story').setAttribute("style","width:75%;margin:auto");
}

function half()

{
document.getElementById('story').setAttribute("style","width:50%;margin:auto");
}

//-->

//更改字体大小
函数resizeText（乘数）{
if（document.getElementById（“sfont”）.style.fontSize==“”）{
document.getElementById（“sfont”）.style.fontSize=“1.0em”；
}
document.getElementById（“sfont”）.style.fontSize=parseFloat（document.getElementById（“sfont”）.style.fontSize）+（乘数*0.2）+“em”；
}
//更改背景色
这是不起作用的Cookies Javascript：

function createCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    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,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

函数createCookie（名称、值、天数）{
如果（天）{
变量日期=新日期（）；
date.setTime（date.getTime（）+（天*24*60*60*1000））；
var expires=“；expires=“+date.togmString（）；
}
else var expires=“”；
document.cookie=name+“=”+value+expires+“path=/”；
}
函数readCookie（名称）{
变量nameEQ=name+“=”；
var ca=document.cookie.split（“；”）；
对于（变量i=0；i
我很确定我没有正确使用cookies.js，但我不知道如何让它工作

任何关于修复cookies.js的帮助，使其能够工作，或者其他方法都会非常有用

提前感谢所有喜欢解决此问题的人。

我试用了您的Cookies Javascript，效果很好。
如果您希望您的用户选项在网站的每一页上保持活跃，您可能需要考虑使用<代码> Session存储> /COD> 尽管存在语法错误，您的自定义Javascript仍在工作

我的建议是在用户设置选项时保存它们，并在之后加载的每个页面中读取它们

这是您需要的定制Javascript。我还修改了语法。我会在这个案例中使用sessionStorage，因为这样你就不需要cookies了

window.onload = loadSettings;
// Change font size
function resizeText(multiplier) {
    sessionStorage.setItem("fontSize", multiplier);
    if (document.getElementById("sfont").style.fontSize == "") {
        document.getElementById("sfont").style.fontSize = "1.0em";
    }
    document.getElementById("sfont").style.fontSize = parseFloat(document.getElementById("sfont").style.fontSize) + (multiplier * 0.2) + "em";
}

function dark() {
    sessionStorage.setItem("background", "dark");
    document.getElementById("sbg").style.backgroundColor = "#474747";
    document.getElementById("stext").style.color = "#cdcdcd";
    document.getElementById("chtitle").style.color = "#e5e5e5";
    document.getElementById("cap1").style.color = "#e5e5e5";
}

function light() {
    sessionStorage.setItem("background", "light");
    document.getElementById("sbg").style.backgroundColor = "#ffffff";
    document.getElementById("stext").style.color = "#8C9398";
    document.getElementById("chtitle").style.color = "#686868";
    document.getElementById("cap1").style.color = "#686868";
}

function sepia() {
    sessionStorage.setItem("background", "sepia");
    document.getElementById("sbg").style.backgroundColor = "#c1b29b";
    document.getElementById("stext").style.color = "#77674f";
    document.getElementById("chtitle").style.color = "#564a36";
    document.getElementById("cap1").style.color = "#564a36";
}

//Change div width
function full() {
    sessionStorage.setItem("divWidth", "full");
    document.getElementById('story').setAttribute("style", "width:100%;margin:auto");
}

function third() {
    sessionStorage.setItem("divWidth", "third");
    document.getElementById('story').setAttribute("style", "width:75%;margin:auto");
}

function half() {
    sessionStorage.setItem("divWidth", "half");
    document.getElementById('story').setAttribute("style", "width:50%;margin:auto");
}

function loadSettings() {
    var fontSize = sessionStorage.getItem("fontSize") && parseFloat(sessionStorage.getItem("fontSize"));
    var background = sessionStorage.getItem("background") && sessionStorage.getItem("background");
    var divWidth = sessionStorage.getItem("divWidth") && sessionStorage.getItem("divWidth");
    resizeText(fontSize);
    if (background == "dark") dark();
    else if (background == "light") light();
    else if (background == "sepia") sepia();
    if (divWidth == "full") full();
    else if (divWidth == "third") third();
    else if (divWidth == "half") half();
}
我会使用localStorage来保存信息。每次您发出HTTP请求（例如获取新页面）时，Cookie都会将信息发送到服务器。而且，它们不会保存那么多信息。这可能值得一看

为了尽可能少地修改代码，我建议您定义一个新函数，存储要调用的函数，然后调用它们

function update(key, funct) {
    localStorage.setItem(key, funct);
    window[funct].call();
}
您需要更改您的链接：

<a href="#" onclick="update('color','dark')">...
<a href="#" onclick="update('color','light')">...
<a href="#" onclick="update('color','sepia')">...
<a href="#" onclick="update('size','full')">...
<a href="#" onclick="update('size','third')">...
<a href="#" onclick="update('size','half')">...
但最好是在循环中执行此操作：

var functs = ['color', 'size'];
for (var i=0; i < functs.length; i++) {
    if (funct = localStorage.getItem(functs[i])) {
        window[funct].call();
    }
}

var functs=['color'，'size']；
对于（var i=0；i
要查看工作示例，请将以下代码保存到web服务器中的html文件，并将其加载到web浏览器中：

<!DOCTYPE html>
<html lang="en">
<head>
    <script>

    // Define fuctions: dark, light, etc. so that they just print their names
    var fs = ['dark', 'light', 'sepia', 'full', 'third', 'half']
    for (var i=0; i < fs.length; i++) {
        var f = fs[i];
        window[f] = (function(funct) {
            return function() {
                alert(funct);
            }
        })(f)
    }

    // Update localStorage and call function
    function update(key, funct) {
        localStorage.setItem(key, funct);
        window[funct].call();
    }

    // Page has loaded
    document.addEventListener("DOMContentLoaded", function() {

        // Call functions when page is loaded
        var functs = ['color', 'size'];
        for (var i=0; i < functs.length; i++) {
            if (funct = localStorage.getItem(functs[i])) {
                window[funct].call();
            }
        }
    });
    </script>
</head>
<body>
    <a href="#" onclick="update('color','dark')">dark</a>
    <a href="#" onclick="update('color','light')">light</a>
    <a href="#" onclick="update('color','sepia')">sepia</a><br>
    <a href="#" onclick="update('size','full')">full</a>
    <a href="#" onclick="update('size','third')">third</a>
    <a href="#" onclick="update('size','half')">half</a>
</body>
</html>


//定义功能：黑暗、光明等，以便他们只打印自己的名字
var fs=['暗'、'亮'、'深褐色'、'满'、'三分'、'半']
对于（变量i=0；i
如果您使用控制台进行调试，我建议将代码中的
alert
更改为
console.log
。它不那么烦人。

谢谢您为我工作 
<!DOCTYPE html>
<html lang="en">
<head>
    <script>

    // Define fuctions: dark, light, etc. so that they just print their names
    var fs = ['dark', 'light', 'sepia', 'full', 'third', 'half']
    for (var i=0; i < fs.length; i++) {
        var f = fs[i];
        window[f] = (function(funct) {
            return function() {
                alert(funct);
            }
        })(f)
    }

    // Update localStorage and call function
    function update(key, funct) {
        localStorage.setItem(key, funct);
        window[funct].call();
    }

    // Page has loaded
    document.addEventListener("DOMContentLoaded", function() {

        // Call functions when page is loaded
        var functs = ['color', 'size'];
        for (var i=0; i < functs.length; i++) {
            if (funct = localStorage.getItem(functs[i])) {
                window[funct].call();
            }
        }
    });
    </script>
</head>
<body>
    <a href="#" onclick="update('color','dark')">dark</a>
    <a href="#" onclick="update('color','light')">light</a>
    <a href="#" onclick="update('color','sepia')">sepia</a><br>
    <a href="#" onclick="update('size','full')">full</a>
    <a href="#" onclick="update('size','third')">third</a>
    <a href="#" onclick="update('size','half')">half</a>
</body>
</html>