HTML - Store checkbox value locally and retrieve - javascript

I am developing a HTML web application. I have five checkboxes and I have to store the checked values locally when I click SAVE sutton. I have to retrieve the checked data from the local storage and display it when I click SHOW button. I have no idea how to do this. Help me to complete this. Thanks in advance.

Try this:
http://jsfiddle.net/sQuEy/4/
Remember that to set a checkbox value in javascript you need to use a boolean value, but web storage saves all values as strings. So:
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;

Try out this code
Incorporating three simple functions from quirksmode, you can do this:
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("checkboxes", $("input:checkbox").serialize(), 30);
alert(readCookie("checkboxes"));

Related

Javascript Cookie function

I have an question relating to my cookie function. Does it really have to have the $(function) for the if(readCookie) or can I specify just function like the rest of the code above it?
I've tried setting it a few different ways but without the $function it doesn't read the set cookie.
Can anybody help put me in the right direction. Thank you.
<script>
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();
}`enter code here`
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);
}
$(function(){
if(readCookie("style") == 'Dark'){
$("body").removeClass().addClass("colour-scheme-1");
$(".styleswitch a").removeClass().addClass("Dark");
}
else {
}
});
</script>
Yes, that's required. What that's doing is deferring execution of the code in that function until after the DOM has been completely built. If you didn't have that, then depending on exactly where on the page that script is imported it might not work at all.
If you were to move the whole <script> block to the very end of the <body>, it'd work without the jQuery "ready" setup.

How to create html5 audio and toggle it depending on a cookie

I have the following code, that tries to play an audio file, and then on pressing the link, you can toggle it on or off (it saves a cookie to save your preference). For some reason the audio does play, but clicking the link does nothing. Ideas? I'm thinking there's something obvious in the cookie part I missed, because this is the first time I'm touching cookies with javascript.
<p>Ääni päälle/pois<br />
<script>
window.onload=function(){
var pre='';
var ele=document.getElementById('test');
ele.play();
//when the song ends start a new one
ele.onended=function(){
//if you are done with all the songs loop back to the beginning.
//Or you could add some code to load more songs from the server
ele.play();
}
}
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);
}
function toggle() {
if(!readCookie(sound)){
createCookie(sound,false,100);
}
else if(readCookie(sound)==false){
createCookie(sound,true,100);
ele.play();
}
else if(readCookie(sound)==true){
createCookie(sound,false,100);
ele.pause();
}
}
</script></p>

Working with cookies from a static page

There is a static (not CGI, not PHP) HTML page (in fact, many such pages, residing in different directories).
I need to store and read cookies for that pages (one cookies for all pages).
I guess, this can be done using JavaScript, right?
Yes, you can use Javascript to play with cookies.
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);
}
Source

Cookie to show a popup every 30 days

<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1)
{
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});
</script>
What's wrong with my above code my facebook like popup is called every time the page is loaded in my blog. I just to show only one time every 30 days.How i can do that?
Your particular implementation looks like it has you checking the cookie for 'visited=false', but setting the cookie to 'visited=true' so your if statement will never match.
I'd suggest you use a proven set of cookie manipulation functions and then your task will be pretty easy.
Here are the cookie functions I use when my environment doesn't already have them:
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);
}
Once you have those, you can do this:
jQuery(document).ready(function() {
var visited = readCookie('visited');
if (!visited || visited !== "true") {
createCookie('visited', "true", 30);
$.colorbox({width:"400px", inline:true, href:"#exestylepopups"});
}
});

Any way that I can assign window.open(url) into cookies array in javascript?

Does anyone know how can I assign window.open(url) into cookies array in javascript?
Below is the code that I used at the moment, but seem not really working well for me....
var expiredays = 30
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie="childWindowHandles["+num+"] =" +window.open(url)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
document.cookie === String
window.open === Object
Object !== String
therefore
document.cookie !== window.open
It would be better to assign the uri string into the cookie array of the window you want to open then pull it out of the cookie when you want to call window.open. Inserting code or sensitive data into a cookie isn't good practice or secure.
Functions taken from: http://www.quirksmode.org/js/cookies.html
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);
}
Then you could go:
createCookie('openUri', uriToOpen);
var openUri = readCookie('openUri');
if (openUri) {
window.open(openUri, 'myWindow');
}
Or something like that.
Hope this helps.

Categories