How to save the state of a javascript variable that is used in multiple html pages

Question

I am trying to make an application in phonegap. I have made a custom.js javascript file which have some functions as

function func1(){....}
function func2(){....}

All these functions will be used in two different html pages. In first HTML page,I am using a variable in func1 which is doing some operation. In second page, I want to access it in func2 in the state in which he was in func1. But i am unable to do it. I am including custom.js in both html pages. I have read that javascript files get reset/refresh when used in multiple pages. Can anybody give me an example that how to save the state of variable in func1 and then access that variable in func2 (in different HTML page) in the state in which he was in func1. i have also read about view state. but it is not working either for me. Please help...

Answer 1

Store the values in localstorage and reference it from there.

function first() {
    localStorage.setItem('myItem', "something you want to store");
}

function second() {
    myValue = null;
    if (localStorage.getItem('myItem')) {
        myValue = localStorage.getItem('myItem');
    }
}

Answer 2

in modern browsers you can use localStorage for that

var get = function (key) {
  return window.localStorage ? window.localStorage[key] : null;
}

var put = function (key, value) {
  if (window.localStorage) {
    window.localStorage[key] = value;
  }
}

use get and put to store value to the local storage of most modern browsers..

Answer 3

The easier and preferred method would be to use window.localStorage for storing site wide variables. To accommodate older browsers as well, you can maybe consider having cookies as a secondary storage location.

// credits to http://mathiasbynens.be/notes/localstorage-pattern
var hasStorage = (function() {
      try {
        localStorage.setItem(mod, mod);
        localStorage.removeItem(mod);
        return true;
      } catch(e) {
        return false;
      }
    }());

function setSiteWideValue(_key, _value) {
    if(hasStorage) {
        localStorage[_key] = _value;
    }
    else {
        document.cookie = _key+'='+_value+'; expires=<date-here>; path=/; ;domain=<.yourdomain>';
    }
}

function getSiteWideValue(_key) {
    if(hasStorage) {
        return localStorage[_key];
    }
    else {
        if(document.cookie.indexOf(_key+'=') != -1) {
            return document.cookie.split(_key+'=')[1].split(';')[0];
        }
    }
}