【知识补充】同源网页数据传输——Method2

本章源代码下载：点我下载

继Chapter7讲完第一种同源网页传输的方法：超链接，现在引入由本地储存（LocalStorage）和JSON转换来实现同源传输。

这里我们一样通过两个网页来实现：

sender.html（发送端）

receiver.html（接收端）

首先引入一个div标签做整体框架，之后p标签用来提示用户传递的消息内容，引入一个文本框和提交按钮；代码如下：

<div>
<p>请输入要传递的消息：</p>
<input type="text" name="message" id="message">
<button onclick="sendMessage()">发送</button>
</div>

这里要注意的两点是：

• 要为input标签设置name和id，便于接下来在js中捕获它。
• button标签中的onclick事件代表了：当用户点击此按钮，会触发名为sendMessage的函数（此函数在js中）

整体的外观界面写完后，下面开始编写js脚本。

代码如下：

<script type="text/javascript">
function sendMessage() {
let message = document.getElementById("message").value;
let messageJson = JSON.stringify(message);
//将数据存入本地存储
localStorage.setItem("message", messageJson);
}
</script>

这里编写的sendMessage函数在上方按钮的onclick处被调用，下面对代码进行详细解析：

• let message = document.getElementById("message").value：此代码是获取输入框的值，并将其存储在变量“message”中。
• let messageJson = JSON.stringify(message)：此代码使用了stringify方法将message对象转换为了JSON对象，并储存在“messageJson"中
• setItem("message", messageJson);：此代码使用了localStorage（本地存储）将messageJson储存为message的键值对中。localStorage是Web存储API的一部分，它允许网站存储数据在用户的浏览器中，并且在用户的浏览器重启后仍然可用。（只要不去手动清除缓存）

接下来是receiver.html（接收端）的页面编写

类似的，我们还是使用一个div作为整体框架，并加上一个p标签（赋予id）方便在js脚本中捕获它。代码如下：

<div>传出数据：
<p id="output">
 
</p>
</div>

很简单的外观架构，“传出数据：”是作为网页的文字用来提示用户的。

下面编写js脚本：

<script type="text/javascript">
let data = JSON.parse(localStorage.getItem("message"));
document.getElementById("output").innerHTML = data;
</script>

代码详解：

• let data = JSON.parse(localStorage.getItem("message"))：它首先从localStorage中获取键为"message"的值，然后使用parse方法将该值从JSON字符串格式解析为JavaScript对象。结果存储在变量data中
• getElementById("output").innerHTML = data：这行代码将前面获取的”data“对象赋值给id为output的p标签，并通过innerHTML将内容附加在p标签内，从而在网页中显示出来

总的来说，这个页面的目的是从localStorage中获取键为"message"的值，将其解析为JSON对象，并将其内容显示在页面上。