当前位置：网站首页>实现两个页面之前的通信(使用localStorage)

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

2022-07-24 03:05:00 【墨鱼爱吃圣代】

实现两个页面之前的通信(使用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;

原网站

版权声明
本文为[墨鱼爱吃圣代]所创，转载请带上原文链接，感谢
https://blog.csdn.net/weixin_51249285/article/details/125926219

当前位置：网站首页>实现两个页面之前的通信(使用localStorage)

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

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

边栏推荐

猜你喜欢

随机推荐