刷新浏览器中JavaScript对象的值 [英] Persisting values in JavaScript object across browser refresh
问题描述
var myObj = {};
现在当用户使用应用程序时，我们为这个对象赋值。
myObj ['Name'] ='先生盖茨的;
myObj ['Age'] = 58;
...
...
...
myObj ['Role'] ='CEO';
但是每当页面刷新时，对象都会丢失其值。
有没有办法使用HTML 5或其他任何技术在页面刷新时保留这些值。
是的，您有两个主要选择：
-
使用cookie。 Cookie很容易从JavaScript中设置，但阅读时有点痛苦。你说过你正在使用jQuery;有几个jQuery插件可以让cookie更容易，如果你搜索jquery cookie plugin你会找到它们。
-
使用网络存储，支持所有主流浏览器，甚至IE8 。你有两个选择：会话存储只持续这个会话，本地存储一直持续到用户清除它或浏览器决定它需要那个空间用于其他东西。
第二个选项非常易于使用，您可以使用JSON格式的字符串（ JSON object也是受所有主流浏览器支持）：
存储你的对象：
localStorage.yourObject = JSON.stringify（obj）;
检索对象（例如，在页面加载时），如果没有存储则返回空白对象：
obj = JSON.parse（localStorage.yourObject ||{}）;
在上面， localStorage 是一个变量（和底层实现）由浏览器提供本地存储。如果你想要会话存储，你可以使用 sessionStorage 。
这是一个完整的本地存储示例：Live Copy
<！DOCTYPE html>
< html>
< head>
< script src =http://code.jquery.com/jquery-1.11.0.min.js>< / script>
< meta charset = utf-8 />
< title>本地存储< / title>
< / head>
< body>
< label>< code>名称< / code>属性：
< input type =textid =txtName>
< / label>
< script>
（function（）{
var txtName = $（＃txtName）;
var obj = JSON.parse（localStorage.yourObject ||'{Name：}' ）;
txtName.val（obj.Name）;
//这显然过度活跃：
txtName.on（更改按键按键模糊粘贴点击，函数（）{
obj.Name = txtName.val（）;
localStorage.yourObject = JSON.stringify（obj）;
}）;
}）（）;
< / script>
< / body>
< / html>
I have created a JavaScript object.
var myObj = {};
Now as user plays-around with the application, we assign some values to this object.
myObj['Name'] = 'Mr. Gates';
myObj['Age'] = 58;
...
...
...
myObj['Role'] = 'CEO';
But whenever the page refresh's, the object looses its values.
Is there any way using HTML 5\or any other technique to persist these values across page refresh.
Yes, you have two primary choices:
Using a cookie. Cookies are easy to set from JavaScript, but a bit of a pain to read. You've said you're using jQuery; there's are a couple of jQuery plug-ins that make cookies a lot easier, if you search for "jquery cookie plugin" you'll find them.
Using web storage, which is supported by all major browsers, even IE8. You have two choices: "Session" storage that only lasts for this "session," and "local" storage which persists until the user clears it out or the browser decides it needs that room for something else.
That second option is quite easy to use, you can store things using JSON-formatted strings (the JSON object is also supported by all major browsers):
Storing your object:
localStorage.yourObject = JSON.stringify(obj);
Retrieving your object (for instance, on page load), or a blank object if there's none stored:
obj = JSON.parse(localStorage.yourObject || "{}");
In the above, localStorage is a variabl (and underlying implementation) provided by the browser for local storage. You could use sessionStorage instead if you wanted session storage.
Here's a complete local storage example: Live Copy
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset=utf-8 />
<title>Local Storage</title>
</head>
<body>
<label><code>Name</code> property for our object:
<input type="text" id="txtName">
</label>
<script>
(function() {
var txtName = $("#txtName");
var obj = JSON.parse(localStorage.yourObject || '{"Name": ""}');
txtName.val(obj.Name);
// This is obviously hyperactive:
txtName.on("change keypress keyup blur paste click", function() {
obj.Name = txtName.val();
localStorage.yourObject = JSON.stringify(obj);
});
})();
</script>
</body>
</html>
这篇关于刷新浏览器中JavaScript对象的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
