搜索热点


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

何轩伟 2023-11-28 159 11/28

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

 

继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对象,并将其内容显示在页面上。

- THE END -
最后修改:2023年11月28日
1

非特殊说明,本博所有文章均为博主原创。