localStorge----前端页面跳转传递数据，无需交互_卡片中通过localstrorageprop来接受需要外部传入的数据-CSDN博客

本文链接：https://blog.csdn.net/chenbetter1996/article/details/83118346

本文介绍了如何在前端页面之间通过localStorge传递数据，实现页面跳转时不与后台交互。以一个显示不全单元格信息点击打开新页面详细显示为例，解释了localStorge的工作原理，将其与HttpSession进行对比，并提供了核心的JavaScript代码示例，展示如何在不同页面之间设置和获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

有时候我们想仅仅在前端页面href跳转到另一个页面，不用后台交互，但是想传一些数据给新页面显示（仅前端实现）。

案例

在这里插入图片描述

例如这些显示不全的单元格信息，想要点击打开一个新网页详细显示，但是不会再和后台交互那么麻烦。

解决方法 — localStorge

使用localStorge，思想和后台的HttpSession很像
localStorge的API和语法介绍

只读的localStorage 允许你访问一个Document 的远端（origin）对象 Storage；数据存储为跨浏览器会话。 localStorage 类似于sessionStorage。区别在于，数据存储在 localStorage 是无期限的，而当页面会话结束——也就是说当页面被关闭时,数据存储在sessionStorage 会被清除。

localStorge简单说就是一个页面数据临时存储器，其生命周期只有浏览器页面生存的时间，页面关闭就没了，对整个项目有效。和HttpSession对ip很像

核心代码：

// 新建一对key-value到localStorge
localStorge.setItem("key", "value");

// 从localStorge通过key获取value
var value = localStorge.getItem("key");

这两个语句可以放在不同页面的js中，如新建语句放在原页面，获取语句放在新页面，就可以获取数据了。

案例代码

/**
 * index.js 部分核心代码
 * 保存要传递的数据，点击跳转
 * 页面对应第一张图片
 */
.....
.....
 // 添加点击函数[id, address,time, log,today,yesterday]
        idCell.onclick = function() {
   
   
            // 暂存信息到localStorage
            localStorage.