javascript - Cookies or session variables that record user preferences for the whole site -
i'm trying setup cookies or session varibles make user preferences on website remain on every page of site, , i'm attempting using javascript, i'm open trying code works.
i want make onclick user options stay active user on every page of website session. if navigate page 2, choice of layout page 1 remembered , remains active on page 2.
what i'm building ereader on website, want user have ability change font size, change background color , change text width suit preference. i've got working, when click next page, settings clear, , have set them again. want site remember choice whole session on site or length of time if that's possible.
i'm new javascript (it's first day writing any), code below might shockingly bad.
i don't know if need use cookie or session variable, fixes i've found either don't work, or aren't meant purpose, can't use them.
in code i've created inside 'story' div changes when user clicks on option above it, , options are:
- enlarge font
- shrink font
- dark theme
- light theme
- sepia theme
- full width
- 75% width
- 50% width
that works far, can't stick user if navigate page. moment click onto next page, preferences clear, , problem.
here code have right now.
the 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> the customize 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"); } //--> this cookies javascript doesn't work:
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); } i'm pretty i'm not using cookies.js correctly, can't figure out how make work.
any fixing cookies.js, works or alternative method helpful.
thanks in advance fancies tackling one.
i tried out cookies javascript , working fine.
if want user options stay active on every page of website session, might want consider using sessionstorage.
your customize javascript working, despite syntax errors.
my advice save user options setting them, , reading them in every page loaded after that.
here customize javascript need. corrected syntax. use sessionstorage case because way don't need 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(); }
Comments
Post a Comment