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日

相关文章

  • 详解用js代码触发dom事件的实现方案

    下面是详解用JS代码触发DOM事件的实现方案的攻略。 什么是DOM事件? DOM事件,是当用户与网页交互时产生的事件。例如,当用户点击鼠标、滚动页面或按下键盘时,都会触发DOM事件。 如何用JS代码触发DOM事件? 我们可以使用JS代码来模拟用户与网页交互,从而触发DOM事件。以下是三种JS代码触发DOM事件的实现方案: 利用dispatchEvent方法 …

    JavaScript 2023年6月10日
    00
  • js中关于Blob对象的介绍与使用

    什么是 Blob 对象 Blob 对象是 JavaScript 中的一个标准对象,它代表了一段二进制数据。通常我们会用它来存储二进制文件,比如图片、视频、音频等等。 在 JavaScript 中,我们可以使用 Blob 构造函数来创建一个 Blob 对象。它接受一个数组作为参数,数组元素可以是字符串、 ArrayBuffer 对象(用于表示二进制数据) 或 …

    JavaScript 2023年5月27日
    00
  • js属性对象的hasOwnProperty方法的使用

    js对象中的属性可以分为两类,一类是对象自身定义的属性,另一类是从原型链中继承而来的属性。js属性对象的hasOwnProperty()方法用于判断一个属性是否是对象自身定义的属性,其用法如下: 对象.hasOwnProperty(属性名称) 其中,对象为需要检查的对象,属性名称是需要检查的属性,如果该属性是对象自身定义的属性,则返回true,否则返回fal…

    JavaScript 2023年5月27日
    00
  • vue中如何监听url地址栏参数变化

    当我们在使用 Vue.js 开发前端应用时,有可能需要监听浏览器地址栏的变化,根据参数的不同,来修改页面的显示逻辑,这就需要监听URL地址栏参数的变化。 在vue中监听URL地址栏参数变化的方法,可以使用Vue Router提供的$route对象。$route包含了当前路由信息,可以通过它来获取URL的地址栏参数信息。如果我们要监听该参数的变化,只需通过wa…

    JavaScript 2023年6月11日
    00
  • 原生js的ajax和解决跨域的jsonp(实例讲解)

    关于原生JS的AJAX和JSONP的介绍和实例讲解,我将从以下三个部分来进行详细解答。 AJAX的介绍和使用方法 AJAX全称为Asynchronous JavaScript and XML(异步的JavaScript和XML),是一种前端常用数据交换技术,能够实现页面异步刷新,避免了页面重新刷新的效果,减轻服务器对请求的压力。使用AJAX技术可以更好的优化…

    JavaScript 2023年5月27日
    00
  • JavaScript Global 对象

    以下是关于JavaScript Global对象的完整攻略,包括两个示例说明。 JavaScript Global对象 JavaScript Global对象是一个全局对象,它包含了所有JavaScript程序都可以访问的属性和方法。在浏览器中,Global对象是window对象,而在Node.js中,Global对象是global对象。 下面是一些常用的J…

    JavaScript 2023年5月11日
    00
  • JS数组方法join()用法实例分析

    JS数组方法join()用法实例分析 在 JavaScript 中,数组是一种常用的数据结构。而 join() 方法可以将数组中所有元素转化为一个字符串,并返回这个字符串。本文将详细讲解 join() 方法的具体用法及示例。 语法 array.join(separator) 参数: separator:可选。指定每个元素被转换为字符串后,元素之间使用的字符串…

    JavaScript 2023年5月27日
    00
  • 浅谈React Router关于history的那些事

    浅谈React Router关于history的那些事 React Router是React中最流行的路由库之一,用于在React应用程序中管理不同URL之间的转换。其中一个重要的概念是history,它是实际实现路由的技术基础。本文将重点讲解React Router中关于history的那些事。 history是什么 首先,我们需要了解什么是history…

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