如何保存多个html页面中使用的javascript变量的状态

Question

我正在尝试在phonegap中创建一个应用程序。 我已经制作了一个custom.js javascript文件，其中包含一些函数

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

所有这些功能都将用于两个不同的html页面。 在第一个HTML页面中，我在func1中使用了一个变量，它正在进行一些操作。 在第二页中，我想在func2中以func1的状态访问它。 但我无法做到。 我在两个html页面中都包含custom.js. 我已经读过，当在多个页面中使用时，javascript文件会被重置/刷新。 任何人都可以给我一个例子，说明如何在func1中保存变量的状态，然后在func1中的func2（在不同的HTML页面中）访问该变量。 我也读过有关视图状态的内容。 但它对我来说都不起作用。 请帮忙...

Answer 1

将值存储在localstorage中并从那里引用它。

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

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

Answer 2

在现代浏览器中，您可以使用localStorage

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

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

使用get和put将值存储到大多数现代浏览器的本地存储中。

Answer 3

更简单和首选的方法是使用window.localStorage存储站点范围的变量。 为了适应旧版浏览器，您可以考虑将cookie作为辅助存储位置。

// 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];
        }
    }
}