Javascript存储/全局数据/对象的状态

Javascript storing/state of global data/object

本文关键字：状态 对象 全局 存储 Javascript 数据      更新时间：2023-09-26

是否有一种方法可以将全局数据存储在window对象中，以便数据能够在页面重新加载/刷新后继续存在。假设我分配全局数据/对象-

window.myObject = myProductObject

用户刷新/重新加载页面，或者可能会跳转到我网站的另一个页面。页面重新加载后，window.myObject是否仍然可用？

注意-：我无法将对象存储在cookie中，因为它是一个对象，我的意思是它可能是对另一个自定义对象的引用，也可能是对通过"window.open"打开的另一个"window"对象的引用

使用window.top.name破解

var data = window.top.name ? JSON.parse(window.top.name) : {}
...
window.top.name = JSON.stringify(data)

window.top.name在页面加载期间持续存在

我建议您使用像lawnchair这样的抽象，而不是

您可以将对象保存在cookie中。但是localStorage更好。类似于饼干，但您可以使用5Mb。

如果保存对象而不是字符串，则必须进行JSON编码/解码，但使用localStorage或cookie上的包装器很容易做到这一点。

这里有一个非常简单的localStorage包装器（您有5Mb要使用）：

var Storage = {
    set: function(key, value) {
        localStorage[key] = JSON.stringify(value);
    },
    get: function(key) {
        return localStorage[key] ? JSON.parse(localStorage[key]) : null;
    }
};

你可以这样使用它：

$(function() {
    var defaultValue = {param1: 'value',counter: 0 },
        myObj = Storage.get('myObj') || defaultValue; // get the obj from storage or create it with default values
    $('body').html('counter: ' + myObj.counter);
    myObj.counter+=1; // increment counter 
    Storage.set('myObj', myObj); // save it to localStorage
});
​

你可以在这个jsFiddle上试试：http://jsfiddle.net/guumaster/LytzA/3/

您可以尝试将对象的字符串表示存储在cookie中，前提是对象仅由值组成（没有方法），例如

var foo = { a: "a", b: "b" };
document.cookie = "foo=" + JSON.stringify(foo);

这里有一个很好的cookie读写器示例-https://developer.mozilla.org/en/DOM/document.cookie

我不确定这是如何在跨浏览器中显示的。我至少让它在chrome、firefox、IE9和IE8/7兼容模式下工作，但你会收到弹出窗口的警告。你可以检测弹出窗口是否被阻止，并拒绝加载任何内容，直到它们为你的网站启用。请参阅检测Chrome 中被阻止的弹出窗口

我正在使用jQuery绑定到beforeunload事件，您可以使用您喜欢的解决方案。

jQuery(function ($) {
    $(window).bind('beforeunload', function () {
        window.open("", "_savedata", "titlebar=0,width=100,height=100").saveData = window.saveData;
    });
    var store = window.open("", "_savedata");      
    window.saveData = store.saveData;
    store.close();    
});

示例：（刷新页面几次）

http://jsfiddle.net/hZVss/1/

正如@Raynos所要求的那样——持续关闭状态——这是你无法串行化的（至少在firefox和chrome中有效，IE称之为安全问题，但可能与jsfiddle如何使用帧有关）

http://jsfiddle.net/ght9f/2/

免责声明：我不会保证这个解决方案的优雅。我只是对使用弹出窗口持久化对象状态感到好奇。将对象序列化为JSON并将其存储在客户端存储中要好得多（@Raynos建议使用lawnchairhttps://github.com/brianleroux/lawnchair/)。如果可以的话，你应该避免cookie，因为这些数据会被发布回服务器，这可能并不理想。

如果你的主要目标是保持对弹出窗口的引用，你实际上可以通过给弹出窗口一个名称来做到这一点。这正是我坚持引用刷新时创建的弹出窗口的方式。

相关文章：