下面是使用window.localStorage在同一域上提供的两个 html 页面之间传递数据的示例。由于同源策略,这不适用于不同的域。
该示例由托管在jsfiddle.net上的两个页面组成,但您可以同样轻松地从本地文件系统提供这些文件。无论哪种方式,本示例中都没有涉及服务器端通信。
第一个页面允许用户在textarea元素中输入一些文本。有一个保存按钮,单击该按钮时将触发执行保存处理程序(指定为 addEventListener 的第二个属性的匿名函数)的单击事件,该处理程序获取用户输入的文本并使用密钥将其保存在 localStorage 中mySharedData
jsfiddle 上的第 1 页
HTML
<textarea id="input"></textarea>
<div>
<button id="save">Save</button>
</div>
Javascript
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
(function (global) {
document.getElementById("save").addEventListener("click", function () {
global.localStorage.setItem("mySharedData", document.getElementById("output").value);
}, false);
}(window));
第二页从mySharedData
localStorage中的key调出保存的文本并显示在textarea中
jsfiddle 上的第 2 页
HTML
<textarea id="output"></textarea>
Javascript
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */
(function (global) {
document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));
这两个示例都包含在一个匿名闭包中,该闭包会立即执行,然后我们将window 对象传递给该闭包,然后我们将其作为名为 的变量引用global
。
最后,第一行是注释,但不是任何旧注释;它是jslint使用的一条指令;一种用于 javascript 软件开发的静态代码分析工具,用于检查 JavaScript 源代码是否符合Douglas Crockford 制定的编码约定。
替代方法是使用:
cookies,再次适用同源政策。
或者
URL 查询字符串,它是将您带到下一页时使用的地址的一部分,可以在 Javascript 中读取它以获取数据。