Develop Reference

How to save a javascript variable

I have a javascript variable, which is incremented by a javascript function in a .php script, only problem is that the page reloads when the function is called, so I need some way of saving the variable to be the same when the page is either reloaded or whenever you enter it.
I know you can do a local save but I am not quiet sure if it saves the variable when you leave the website.
My variable is in a html script.
<script type="text/javascript">
var varNumber= 1;
document.getElementById("varNumber").innerHTML = varNumber;
document.getElementByID("varNumber").value = varNumber;
function addToVariable() {
varNumber= varNumber+ 1 ;
document.getElementById("varNumber").innerHTML = varNumber;
}
</script>

Here are three client-side methods to save JavaScript variables across page refreshes and descriptions on how long they can persist data.
Saving a JavaScript variable with local storage
Saving a JS variable using local storage is easy and convenient with modern browsers.
var get = function (key) {
return window.localStorage ? window.localStorage[key] : null;
}
var put = function (key, value) {
if (window.localStorage) {
window.localStorage[key] = value;
}
}
To save and read an object instead of a simple variable:
localStorage.yourObject = JSON.stringify(obj);
obj = JSON.parse(localStorage.yourObject || "{}");
Persistence:
User agents may, if so configured by the user, automatically delete
stored data after a period of time.
For example, a user agent could be configured to treat third-party
local storage areas as session-only storage, deleting the data once
the user had closed all the browsing contexts that could access it.
This can restrict the ability of a site to track a user, as the site
would then only be able to track the user across multiple sessions
when he authenticates with the site itself (e.g. by making a purchase
or logging in to a service).
However, this also reduces the usefulness of the API as a long-term
storage mechanism. It can also put the user's data at risk, if the
user does not fully understand the implications of data expiration.
References:
http://dev.w3.org/html5/webstorage/
Persisting values in JavaScript object across browser refresh
How persistent is localStorage?
Saving a JavaScript variable with cookies
Saving a variable 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;
}
Persistence:
Session cookies - these are temporary and are erased when you close
your browser at the end of your session.
Persistent cookies - these remain on the client hard drive until they
are erased or expire.
This is ultimately user-dependent. They could be paranoid about
cookies and local storage, and set them to session-only or none at
all.
REF: Set cookie and get cookie with JavaScript
Saving a JavaScript variable with window.name
You could also use the window’s name window.name to store the information using a JavaScript session.
Persistence:
This only works as long as the same window/tab is used.
REF: http://www.thomasfrank.se/sessionvars.html

You can use localStorage on client side
<script>
localStorage.setItem("mykey",99); // set a variable
var varNumber = localStorage.getItem("mykey"); // retrieve variable
</script>

You could use AJAX to execute PHP, like:
<?php
session_start(); $r = array();
if(isset($_POST['holdNumber'])){ // assumes {holdNumber:numberHere} sent through AJAX
if(preg_match('/^\d+$/', $_POST['holdNumber']){
$r['heldNumber'] = $_SESSION['holdNumber'] = $_POST['holdNumber'];
}
else{
// holdNumber hack
}
}
elseif(isset($_POST['load'])){
if(+$_POST['load'] === 1){ // assumes sending {load:1} in AJAX
if(isset($_SESSION['holdNumber']){
$r['heldNumber'] = $_SESSION['holdNumber'];
}
else{
$r['heldNumber'] = $_SESSION['holdNumber'] = 0;
}
}
else{
// load hack
}
}
echo json_encode($r);
?>

JavaScript: Saving/Loading cookies using HTML documents for a website

For school work I need to use JavaScript to Save and read a cookie. The code for setting the cookie is all good, I got it from w3Schools (I know it's a terrible guide apparently). My problem is getting it to work with HTML/notepad using the "path" thing going on.
When the webpage loads a function called checkcookie checks if the cookie exists, if it doesn't, it asks the user to enter their name and then saves a cookie for later. If a cookie already exists, it displays a greeting message :). So far, I have made the functions work on the example running interface thing that you can access on w3schools. However, I recently tried setting them up using HTML documents, and the cookies don't seem to save properly. I open a NotePad document, paste the code, save as HTML, and open with Google Chrome. The pop-up asks for my name, I enter, but when I reload, the pop-up asks for my name again, and again, and so on. Here is the page I got the functions from: http://www.w3schools.com/js/js_cookies.asp
I think I need to sort out a path for the cookie, or something, I looked at this webpage for more info http://www.quirksmode.org/js/cookies.html but I still don't understand.
Why does this not work? Should I set the path to the file directory which the webpage's html documents are saved in? Why does it work in the w3schools TryIt system but not with raw HTML documents?
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires+"; path=/";
}
function getCookie(cname) {
var title = cname + "=";
var cookie_array = document.cookie.split(';');
for(var i=0; i<cookie_array.length; i++) {
var check = cookie_array[i];
while (check.charAt(0)==' ') check = check.substring(1);
if (check.indexOf(title) != -1) {
return check.substring(title.length, check.length);
}
}
return "";
}
function checkCookie() {
var name=getCookie("name");
if (name != "") {
alert("Welcome again " + name);
} else {
name = prompt("Please enter your name:","");
if (name != null && name != "") {
setCookie("name", name, 30);
}
}
}

Yep, as mentioned by jyrkim is a webserver thing

javascript - read a seperate tab to check if it's open

I'm looking for a way to somehow read / check if another browser tab is open before opening the requested tab.
For example:
This is for my traffic exchange site, they just open mysite.com/surf.php and leave it viewing user's submitted sites in a frame. They earn points just for leaving that running.
Now lets say USER A has SURF PAGE A running fine and then opens SURF PAGE B then he has 2 mysite.com/surf.php running and earning double the points everybody else will earn.
What I want to happen is:
USER A has SURF PAGE A running fine and then tries to open SURF PAGE B which will check if another mysite.com/surf.php is already open and if it is to redirect the request for the 2nd surf page to another mysite.com/surf-error.php
So they can only ever have 1 mysite.com/surf.php running at any given time.
How would I go about doing this?

Browser windows on the same domain in the same browser can exchange some information via:
Cookies
Local Storage
Communication with a common server
You can use 1) or 2) to store some information about an active page and refuse to let other pages be active if one is already active.
But, the most reliable way to enforce policies like you are asking about is to use the actual server to enforce it. If users have a login, then code the server to only allow a logged in user to accumulate points for one site at a time.
Other than these options, if you want to enforce it all client-side, you would probably need a browser-plugin that could monitor all open browser windows (which I assume is not practical). You cannot do monitoring of multiple windows opened by the user from plain javascript in a web page.

when you start tracking time for someone set a session variable
session.trackingtime = true
when you check again to start tracking time make sure that value is set to false. When you stop tracking time set the variables to false.

I have done something very similar today. Just update the else if part to do a redirect in your case.
// helper function to set cookies
function setCookie(cname, cvalue, seconds) {
var d = new Date();
d.setTime(d.getTime() + (seconds * 1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// helper function to get a cookie
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// Do not allow multiple call center tabs
if (~window.location.hash.indexOf('#admin/callcenter')) {
$(window).on('beforeunload onbeforeunload', function(){
document.cookie = 'ic_window_id=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
});
function validateCallCenterTab() {
var win_id_cookie_duration = 10; // in seconds
if (!window.name) {
window.name = Math.random().toString();
}
if (!getCookie('ic_window_id') || window.name === getCookie('ic_window_id')) {
// This means they are using just one tab. Set/clobber the cookie to prolong the tab's validity.
setCookie('ic_window_id', window.name, win_id_cookie_duration);
} else if (getCookie('ic_window_id') !== window.name) {
// this means another browser tab is open, alert them to close the tabs until there is only one remaining
var message = 'You cannot have this website open in multiple tabs. ' +
'Please close them until there is only one remaining. Thanks!';
$('html').html(message);
clearInterval(callCenterInterval);
throw 'Multiple call center tabs error. Program terminating.';
}
}
callCenterInterval = setInterval(validateCallCenterTab, 3000);
}

How can I store a cookie in local storage with Javascript?

I have an app for Android (and hopefully later iPhone) that is based on Javacript and is made into an app using Phonegap/Applaud.
Unfortunately, setting and getting cookies is not working on Android, and this might be particular to the Android environment. I was advised that using "local storage" might be more reliable.
However, I knew nothing about local storage until this morning, and so I'm struggling to get aquainted. From what I gather, it's basically just another place to save data with a different syntax. For my situation, I don't think it gives me any advantages over cookies other than the fact that Android is forcing me to use it. As a result, I'm hoping I can still leverage my existing code for setting and getting cookies, and not have to take on a whole new approach.
Surely I can just do a test in my Javascript to see if there is local storage, and if so, store and retrieve my cookie data there, and if not, then just use cookies as normal?
Note 1: I searched Stack Overflow for similar questions, and there was this one which at first seems exactly what I'm talking about, but it's too terse so I can't parse it to know what I should do with it. Also, I think it assumes the presence of libraries and code that I don't think I have. I also looked at this question but I think it's doing the reverse of what I'm after.
Note 2: This is my current code for getting and setting cookies (procured from somewhere on the web. Up until the Android problem, was rock solid reliable):
function getCookie(c_name)
{
var c_start = document.cookie.indexOf(c_name + "=");
if (document.cookie.length > 0)
{
if (c_start !== -1)
{
return getCookieSubstring(c_start, c_name);
}
}
return "";
}
function setCookie(c_name, value, expiredays)
{
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) +
((expiredays === null) ? "" : ";expires=" + exdate.toUTCString());
alert("this is document.cookie: " + document.cookie);
}

Have a look at http://diveintohtml5.info/storage.html. The history might not be very interesting at all, but it at least provides an excellent link list to other tutorials in the further-reading section.
So, now to your code. The first thing to mention is that localStorage has no expire - it's persistent (until the user manually cleans everything). If you'd like to use some shorter storage, you might also use sessionStorage, which has the same interface but last only until the browser is closed.
Rephrasing your code is simple:
function getCookie(c_name) {
return localStorage.getItem(c_name);
}
function setCookie(c_name, value, expiredays) {
return localStorage.setItem(c_name, value);
}

localStorage behaves exactly like a regular Object.
localStorage.somekey = "My data"; // set
alert(localStorage.somekey); // get
delete localStorage.somekey; // unset
The only real difference between localStorage and any other Object is that it is pesistent. Any page from the same origin can access the values in the object, and they even survive if the browser is closed.
They are superior to cookies in every way for data storage, because they don't get sent to the server with every single request (although that's not to say cookies are useless - both have their advantages).
It's really simple ;)

I used the information in the other answers, so this isn't a different answer, but I just thought it would be helpful to others to see the complete code I ended up with. This can be pretty much dropped in as a replacement for using cookies (as I did). It tests for local storage, and uses that if present, and uses cookies if it isn't.
Note you'll probably want to take out the alerts when implementing it.
function getCookie(c_name)
{
if(typeof localStorage != "undefined")
{
return localStorage.getItem(c_name);
}
else
{
var c_start = document.cookie.indexOf(c_name + "=");
if (document.cookie.length > 0)
{
if (c_start !== -1)
{
return getCookieSubstring(c_start, c_name);
}
}
return "";
}
}
function setCookie(c_name, value, expiredays)
{
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
if(typeof localStorage != "undefined")
{
alert("This place has local storage!");
localStorage.setItem(c_name, value);
}
else
{
alert("No local storage here");
document.cookie = c_name + "=" + escape(value) +
((expiredays === null) ? "" : ";expires=" + exdate.toUTCString());
}
}

getting or setting cookies with javascript

My question is if I can set a cookie using javascript (and read it)
My first impression is that the code beneath doesn't work
If I look in my vista cookie folder, I can not see the name of the cookie
function zetCookie(naam,waarde,dagen) { // setCookie(name,value,days)
if (dagen) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var verloopdatum = "; expires="+date.toGMTString(); // expiry_date
}
else var verloopdatum = "";
document.cookie = naam+"="+waarde+verloopdatum+"; 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;
}

I can't answer why the cookie is not showing in your Vista folder, but that code properly sets and reads cookies as intended. How are you testing it? An easier way to test whether the cookies are sticking is by simply doing something like this:
<input type="button" value="Set" onClick="createCookie('test','yay',5);">
<input type="button" value="Read" onClick="alert(readCookie('test'));">
You can refresh the page between Setting and Reading it if makes you feel better, but it works for me.
If that doesn't show what you're expecting, make sure your browser is setup to accept cookies. :)
EDIT: Looking at your code, you missed replacing days in this line:
date.setTime(date.getTime()+(days*24*60*60*1000));

I'm testing it here: http://flamencopeko.net/cookie.php and here: http://flamencopeko.net/cookie.js. Works perfect.
And, yeah, Firebug's Cookies panel is great.
I'm trying to use your script to save font size preference. Here is a thread on that: simplify font size toggle.

Install Firefox
Install FireBug
Install FireCookies
Download JQuery
Download the Cookie plugin