实现两个页面之前的通信(使用localStorage)

我怎么还没变得厉害

已于 2022-07-22 11:37:08 修改

阅读量289

点赞数

分类专栏： JavaScript 学生成绩管理系统文章标签：前端 javascript html

于 2022-07-22 09:56:02 首次发布

本文链接：https://blog.csdn.net/weixin_51249285/article/details/125926219

版权

localStorage 页面通信数据存储 HTML JavaScript

关键词由CSDN通过智能技术生成

JavaScript 同时被 2 个专栏收录

41 篇文章 3 订阅

订阅专栏

学生成绩管理系统

6 篇文章 1 订阅

订阅专栏

实现两个页面之前的通信(使用localStorage)

分析：

在text.html 里面添加一个输入框 input 作为传输的数据页面添加一个存储按钮 button id = “btn” 存储输入框的数据
添加一个跳转链接 a
在text2.html 里面添加一个输入框用于显示从第一个页面接收到的数据
在text.js里面操作text.html
(1) 获取输入框 let input = document.querySelector(“#lq”);
(2) 通过 input.value = ‘lq’ 赋值可以实时进行更改 text.html 输入框内容
(3) 获取存储按钮 let btn = document.querySelector(“#btn”);
(4) 对按钮添加点击事件点击按钮进行存储数据 localStorage.setItem(“msg”, result);
在text2.js里面操作text2.html
(1) 获取数据 let result = localStorage.getItem(‘msg’);
(2) 获取text2.html输入框
(3) 将获取的值赋值给输入框

实现效果：

文件
左边是未给输入框赋值，右边是赋值了
点击存储按钮之后右键检查可以看到存储的数据，如果没有显示正确的输入框信息，可以刷新一下（绿色框）
点击跳转页面页面会显示前一个页面的数据
在第一个页面更改数据，存储之后，跳转，第二个页面会显示修改之后的数据

代码：
text.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <input type="text" id="lq" >

  <button id="btn">存储</button>

  <!-- <input type="text" id="repeat"> -->
  <a href="./text2.html">跳转</a>

  <script src="text.js"></script>
</body>
</html>

text.js

let input = document.querySelector("#lq"); // 获取input节点
input.value = 'lq';
let result = input.value;

let btn = document.querySelector("#btn");  

btn.onclick = function() {
  // console.log(input.value);
  // let input2 = document.querySelector("#repeat");
  // input2.value = input.value;
  result = input.value;
  localStorage.setItem("msg", result);  // 存储  "msg"类似于属性名， result类似于 属性值

}

text2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" id="lq">
  <script src="./text2.js"></script>
  
</body>
</html>

text2.js

let result = localStorage.getItem('msg');  // 用msg属性名 获取属性值
console.log(result);
let input = document.querySelector("#lq");
input.value = result;

我怎么还没变得厉害

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录