0
我正在尝试设置Cookie或会话变量以使网站上的用户首选项保留在站点的每个页面上，并且我正在尝试使用它Javascript，但我愿意尝试任何有效的代码。记录整个站点的用户首选项的Cookie或会话变量
我想让我的onclick用户选项在网站的每个页面上为其会话保持活动状态。因此，如果他们导航到第2页，他们从页面1的布局选择被记住并且在页面2上保持活跃。
我正在建设的基本上是一个网站上的电子阅读器，所以我希望用户有能力更改字体大小，更改背景颜色并更改文字宽度以适合他们的偏好。我已经掌握了所有这些工作，但是当他们点击下一页时，设置清晰了，他们必须重新设置它们。我希望网站记住他们在网站上的整个会话的选择或者一段时间，即使这是可能的。
我对Javascript很陌生（这是我写的第一天），所以下面的代码可能会非常糟糕。
我不知道我是否需要使用cookie或会话变量，但是我发现的所有修复都不起作用，或者它们并非真正用于此目的，所以我可以'不要使用它们。
在我所创作的“故事”里面的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>
自定义的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");
}
//-->
这是饼干的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);
}
我敢肯定，我没有正确使用cookies.js，但我无法弄清楚如何使它工作。
修复cookies.js的任何帮助，以便它的工作或替代方法将非常有用。
在此先感谢任何想解决这个问题的人。
非常感谢！这工作完美。 – CC87