Sha*_*der 6 javascript jquery html5 persistent-storage
我创建了一个JavaScript对象.
var myObj = {};
现在,当用户使用应用程序时,我们会为此对象分配一些值.
myObj['Name'] = 'Mr. Gates';
myObj['Age'] = 58;
...
...
...
myObj['Role'] = 'CEO';
但无论何时页面刷新,对象都会丢失其值.
是否有任何方法可以使用HTML 5 \或任何其他技术在页面刷新期间保留这些值.
T.J*_*der 13
是的,您有两个主要选择:
使用cookie.Cookie很容易通过JavaScript 设置,但读起来有点痛苦.你说过你正在使用jQuery; 有几个jQuery插件可以让cookie变得更容易,如果你搜索"jquery cookie plugin",你会找到它们.
使用网络存储,这是由所有主要浏览器,甚至IE8的支持.你有两个选择:"会话"存储只持续这个"会话","本地"存储一直存在,直到用户清除它或浏览器决定它需要那个空间的其他东西.
第二个选项非常容易使用,您可以使用JSON格式的字符串存储内容(所有主流浏览器JSON也支持该对象):
存储您的对象:
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>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>
| 归档时间： |
|
| 查看次数： |
7836 次 |
| 最近记录： |