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

关键词：

【中文标题】全局数据/对象的 Javascript 存储/状态【英文标题】：Javascript storing/state of global data/object 【发布时间】：2012-03-27 23:12:45 【问题描述】：

有没有办法将全局数据存储在window 对象中，这样数据可以在页面重新加载/刷新后继续存在。所以假设我分配了我的全局数据/对象-

window.myObject = myProductObject

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

注意 -：我不能将对象存储在 cookie 中，因为它是一个对象，我的意思是它可能是对另一个自定义对象的引用，或者它可能引用另一个具有通过“window.open”打开

【问题讨论】：

如果您的对象需要是字符串，则将其字符串化：developer.mozilla.org/En/Using_native_JSON 客户端存储唯一真正的解决方案是 indexedDB 【参考方案1】：

使用window.top.name hack

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

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

我建议您改用 lawnchair 之类的抽象

【讨论】：

TIL - window.top.name 和草坪椅。希望我能 +2【参考方案2】：

您可以将对象保存在 cookie 中。但是 localStorage 更好。类似于 cookie，但您可以使用 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/

【讨论】：

你也可以阅读这个Web Storage explained on Dev.Opera【参考方案3】：

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

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

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

【讨论】：

Cookie 是 错误 解决方案 @Raynos 需要详细说明吗？它可能不是最新的解决方案（本地存储很酷，但我老了，并没有立即想到它）但是 cookie 是解决这个问题的方法 Cookie 随每个 HTTP 请求一起发送，增加了带宽和延迟。无论如何，如果您需要服务器和客户端上的数据，这是一个正确的解决方案，如果您只需要它在客户端上，那么这是一个糟糕的解决方案 @Raynos 请记住仍然不支持本地存储的 large number of browsers（包括 IE7）。根据 OP 的要求，它甚至可能不是一个选项 有比 IE7 支持的 cookie 更好的 hack，window.top.name 和 userData 浮现在脑海。也不要通过网络发送您存储的 cookie。【参考方案4】：

我不确定这个展会是如何跨浏览器的。我至少让它在 chrome、firefox 和 IE9 和 IE8/7 的兼容模式下工作，但你会收到关于弹出窗口的警告。您可以检测弹出窗口是否被阻止并拒绝加载任何内容，直到它们为您的站点启用。见Detect blocked popup in 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 会推荐草坪椅 https://github.com/brianleroux/lawnchair/）。如果可以，您应该避免使用 cookie，因为这些数据会被发送回服务器，这可能并不理想。

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

【讨论】：

使用弹出窗口保持状态是巨魔 同意。不过，无需用不太有用的术语重申。 一个答案是一个推荐的解决方案，而不是一个关于如何解决它的学术问题。 如果您阅读了这个问题，您可能会注意到这个答案实际上回答了这个问题。这也是真正持久化状态的唯一方法，因为 JSON 没有封装整个状态，正如 OP 所提到的。理想的解决方案是以不同的方式进行，但要解决 OP 要求的给定约束的问题，这是唯一的方法。 如果您需要保留不可序列化的状态，或者出于任何原因决定您想要，正如 OP 所要求的那样，这是唯一的方法。我希望 OP 能从解决方案的丑陋中看出，考虑不同的方法是一个更好的主意，但我不会做出这个决定。

javascript中的全局对象，内置对象和预定义对象是啥？

RT1.全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。  通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。  全局对象不是任何对象的属性，所以它没有名称。2.内部对象是编写... 查看详情

在 React 中，将获取的 Firebase 数据存储在本地还是全局状态？

】在React中，将获取的Firebase数据存储在本地还是全局状态？【英文标题】：InReact,storefetchedFirebasedatainlocalorglobalstate?【发布时间】：2018-02-2400:56:42【问题描述】：我正在为处理出租房间的小企业构建管理仪表板。他们只有6个房... 查看详情

我可以创建一个“全局”对象来存储多个对象的变量吗？

】我可以创建一个“全局”对象来存储多个对象的变量吗？【英文标题】：CanImakea"global"objecttostorevariablesformultipleobjects?【发布时间】：2012-11-1303:23:26【问题描述】：我正在创建一个将显示多个图形的图形应用程序。这些... 查看详情

Javascript - 在对象中存储函数 - 不好的做法？ [关闭]

】Javascript-在对象中存储函数-不好的做法？[关闭]【英文标题】：Javascript-Storingfunctioninobject-badpractice?[closed]【发布时间】：2012-02-1217:35:12【问题描述】：将函数存储在对象中而不是仅仅定义它们（因此是全局的）是否被认为是不... 查看详情

如何从 Kafka 全局状态存储中删除记录？

】如何从Kafka全局状态存储中删除记录？【英文标题】：HowtoDeleteRecordfromKafkaglobalstatestore?【发布时间】：2020-08-2912:41:53【问题描述】：恢复期间的全局状态存储将转储来自源主题的数据（这被认为是全局存储的更改日志主题）。... 查看详情

读书笔记-javascript中的全局对象

对于任何JavaScript程序，当程序开始运行时，JavaScript解释器都会初始化一个全局对象以供程序使用。这个JavaScript自身提供的全局对象的功能包括：1.全局对象拥有一些常用的属性值。比如undefined、Infinity以及NaN。2.全局对象拥有一... 查看详情

vuex和单纯的全局对象有啥区别

参考技术AVuex和全局对象主要有两大区别：1、Vuex的状态存储是响应式的。当Vue组件从Store中读取状态的时候，若Store中的状态发生变化，那么相应的组件也会相应地得到高效更新。2、不能直接改变Store中的状态。改变Store中的状... 查看详情

每日灵魂一问-node.js的全局对象有哪些？

1.global表示node.js的全局运行环境（JavaScript中，通常window是全局对象，而Node.js中的全局对象是global）2.process表示node.js的进程状态3.console用于控制台的输出4.Class:Buffer可以处理二进制以及非Unicode编码的数据5.全局的函数：setTimeoutset... 查看详情

vue笔记（vuex全局状态管理器）

参考技术A全局状态管理器，可以在项目的任何一个组件中去获取和修改，修改可以得到全局响应的变量vue-cli2项目中安装vuex，使用npminstallvuex--save安装成功后，在src目录下新建一个store文件,里面创建一个js文件在js文件中写入：... 查看详情

在 MYSQL 数据库中存储包含对象的 javascript 数组？

】在MYSQL数据库中存储包含对象的javascript数组？【英文标题】：StoringajavascriptarraythatcontainsobjectsinaMYSQLdatabase?【发布时间】：2012-05-1909:00:15【问题描述】：所以在javascript中我有一个看起来像这样的数组：[x1:0,x2:2000,y:300,x1:50,x2:250,... 查看详情

vuex简单使用

...里面只能定义同步方法）。$store：返回的是当前项目中的全局状态对象。commit()方法：用于执行指定的mutations里面的方法。在组件中，直接通过$store.state就可以获取到全局状态对象管理的状态数据，直接渲染到页面。state选项：... 查看详情

vue全局存储(store)(代码片段)

通过创建包含在组件之间共享数据存储的存储模式，可以实现一些简单的状态管理。存储（Store）可以管理应用程序的状态以及负责更改状态的方法。//定义Store储存exportconststroe=state:numbers:[1,2,3],addNumber(newNumber)this.state.numbers.push(n... 查看详情

javascript全局对象

JavaScript全局对象全局属性和函数可用于所有内建的JavaScript对象。顶层函数（全局函数）函数描述decodeURI()解码某个编码的URI。decodeURIComponent()解码一个编码的URI组件。encodeURI()把字符串编码为URI。encodeURIComponent()把字符串编码为UR... 查看详情

javascript中两种类型的全局对象/函数

这里所说的JavaScript指浏览器环境中的包括宿主环境在内的。第一种是ECMAScriptGlobalObject，第二种是宿主环境(Host)下的全局对象/函数。一、核心JavaScript内置对象，即ECMAScript实现提供的不依赖于宿主环境的对象这些对象在程序执行... 查看详情

14.vuex和localstorage，全局变量的区别

...能为力。所以就将这些组件的共享状态抽取出来，以一个全局单例模式管理，即vuex。vuex和全局变量的区别：1，【响应式】vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组... 查看详情

Rails，js变量的全局存储

...如何从控制器获取navigator.geolocation？对于每个用户，这种javascript对象是否有一些全局存储？【问题讨论】：【参考方案1】 查看详情

javascript中cookie的解析

JavaScript中的另一个机制：cookie，则可以达到真正全局变量的要求。cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。在上一节，曾经利用一个... 查看详情

数据存储--《高性能javascript》

1.数据存储的方式　　1.字面量　　2.变量　　3.数组项　　4.对象成员2.各自的性能特点　　1.访问字面量和局部变量的速度最快，访问数组项和对象成员相对较慢　　2.由于局部变量在作用域链的起始位置，因此访问局部变量比... 查看详情