HTML页面传值

最新推荐文章于 2021-11-13 09:13:21 发布

北冥牧之

最新推荐文章于 2021-11-13 09:13:21 发布

阅读量508

点赞数

本文链接：https://blog.csdn.net/qq_42971035/article/details/107860394

版权

在比较古老的前端开发中，如果是使用jsp编写页面，页面之间传值会非常方便，但是如果是使用了HTML，页面之间的传值会一时之间不知道如何解决。下面记录一下项目中遇到的这个问题，以及验证过的解决方案。

本文使用的方法参考了：https://www.cnblogs.com/zxh1919/p/8182080.html

以及菜鸟教程：https://www.runoob.com/jsref/obj-storage.html

简单使用：

在发送参数的页面使用：

sessionStorage.setItem("userId", "A000001");

// 或者可以放置整个json参数
sessionStorage.setItem("data", JSON.stringify(param));

在接收参数的页面使用：

var userId = sessionStorage.getItem("userId");

// 或者直接给指定的字段赋值
document.getElementById("result").innerHTML = localStorage.getItem("userId");

简单使用之后下面介绍一下Window sessionStorage属性。

Web 存储 API 提供了 sessionStorage （会话存储）和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

浏览器支持，以及其他用法，请参考菜鸟教程：https://www.runoob.com/jsref/obj-storage.html