JS实现把一个页面层数据传递到另一个页面的两种方式

JS 实现把一个页面层数据传递到另一个页面主要有两种方式:URL参数传递和 localStorage 本地存储。

URL 参数传递

URL 参数传递是将要传递的数据拼接在 URL 中,通过 URL 传递给另一个页面。这种方式简单,易于实现,适用于传递少量数据。下面提供一个使用 URL 参数传递的示例:

发送页面:

const name = "Alice";
const age = 20;
const url = `./receive.html?name=${name}&age=${age}`;
window.location.href = url;

上述代码中,通过拼接 URL 参数的方式将 nameage 的值传递给了 receive.html 页面。

接收页面:

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get("name");
const age = urlParams.get("age");

console.log(name, age); // Alice 20

上述代码中,使用 URLSearchParams 对象获取 URL 中的参数值,从而获取到传递的数据。

localStorage 本地存储

localStorage 是 HTML5 中新增的本地存储 API,可以将数据存储到浏览器中,方便在不同页面中共享数据。下面提供一个使用 localStorage 本地存储的示例:

发送页面:

const data = {
  name: "Bob",
  age: 30
};
localStorage.setItem("myData", JSON.stringify(data));
window.location.href = "./receive.html";

上述代码中,将要传递的数据存储到了 localStorage 中,并跳转到了 receive.html 页面。

接收页面:

const data = JSON.parse(localStorage.getItem("myData"));
console.log(data.name, data.age); // Bob 30
localStorage.removeItem("myData"); // 可选操作,根据实际需求决定

上述代码中,通过 getItem 方法获取 localStorage 中存储的数据,并将其解析为对象后获取相应的属性值。获取完数据后,可以根据实际需求决定是否要从 localStorage 中删除这个数据。

以上就是两种方式的详细攻略。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现把一个页面层数据传递到另一个页面的两种方式 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • html5指南-7.geolocation结合google maps开发一个小的应用

    下面是关于“HTML5指南-7.geolocation结合google maps开发一个小的应用”的详细攻略: 一、什么是geolocation? Geolocation是HTML5的一个新特性,它能够让我们通过浏览器获取到用户的地理位置信息,以及海拔高度和速度等信息。 二、如何结合google maps开发应用? 如果想要将geolocation和goog…

    JavaScript 2023年6月11日
    00
  • Js event事件在IE、FF兼容性问题

    下面是关于Js event事件在IE、FF兼容性问题的完整攻略: 1. 事件模型的差异 在Web页面中,事件是一种观察者模式的设计模式,即在一个对象上发生事件时,其它对象可以得到通知并做出相应的的处理。 但是,IE与其它主流浏览器的事件模型存在差异。IE采用了“事件冒泡”模型,而其它主流浏览器则采用了“事件捕获”模型。 事件冒泡模型 事件从最具体的元素开始发…

    JavaScript 2023年6月11日
    00
  • 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

    以下是详细的攻略。 利用Chrome浏览器进行JS调试 如果我们的网页出现了一些问题,我们常常需要使用开发者工具来进行排除问题。现在我们来介绍如何在Chrome浏览器中进行JS调试。 打开Chrome浏览器,在页面上右键点击鼠标,选择“检查”或按下快捷键“Ctrl + Shift + I”,打开开发者工具。 选择“Sources”选项卡,在左侧面板中找到我们…

    JavaScript 2023年5月28日
    00
  • 带你搞懂js的深拷贝

    带你搞懂js的深拷贝 在JavaScript中,拷贝是一项非常重要的任务,因为在JavaScript中,赋值操作并不是简单的复制一个变量的值到另一个变量,而是复制该变量所持有的引用地址,这意味着如果你直接将一个变量赋值给另一个变量,那么两者将共享同一份数据,即数据的修改将会同步。因此,当你需要对数据进行操作和修改时,深拷贝是至关重要的。 深拷贝的实现 实现一…

    JavaScript 2023年5月27日
    00
  • 扒一扒JavaScript 预解释

    下面是关于 “扒一扒JavaScript 预解释” 的完整攻略: 什么是JavaScript预解释? JavaScript是一种解释型语言,它在运行前必须进行解释并执行代码,而预解释则是在JavaScript代码执行之前进行一遍解释的过程。预解释其实是JavaScript解释器在读取JavaScript代码时,先查找所有定义的变量、函数,并且把这些变量、函数…

    JavaScript 2023年5月18日
    00
  • 使用JS+XML(数据岛)实现分页)

    那么下面就是详细讲解“使用JS+XML(数据岛)实现分页”的完整攻略: 什么是数据岛? 数据岛是一种传输XML数据的技术。通过XML数据岛技术,我们可以将XML数据作为HTML文档的一部分传输到客户端。XML数据岛把XML数据存储在一个特定的DIV元素中,在浏览器页面上隐藏该元素即可,通过JavaScript的DOM操作,即可取得数据,从而实现数据分页的需求…

    JavaScript 2023年6月10日
    00
  • JS实现字符串转驼峰格式的方法

    JS实现字符串转驼峰格式的方法,可以通过使用正则表达式和replace方法来实现。下面是一个完整的攻略: 使用正则表达式和replace方法实现 步骤如下: 通过正则表达式匹配所有需要转换为驼峰格式的字符串。 javascript/[-_]\w/g [-_]表示要匹配的分隔符可以是 – 或 _ ,方括号[]表示单字符匹配 \w表示匹配任何字母数字字符,等价于…

    JavaScript 2023年5月28日
    00
  • JS图片预加载 JS实现图片预加载应用

    JS图片预加载指的是在页面加载时,提前加载所有需要的图片资源,从而缩短用户等待时间,提高用户体验。下面,我将为大家介绍如何使用JavaScript实现图片预加载以及如何应用到实际项目中。 实现图片预加载 以下是实现图片预加载的JavaScript代码: let imgList = new Array( "image1.jpg", &quo…

    JavaScript 2023年6月11日
    00
合作推广
合作推广
分享本页
返回顶部