当前位置：首页 > article >正文

＜javascript＞＜html＞在两个html页面间跳转时使用浏览器本地存储localStorage传递共享参数

article 2024/11/27 22:17:36

前言
本文是前端学习中间的一环，实现了两个html之间导航跳转时，通过浏览器存储来传递共享参数的功能。由于一般浏览器存储都不太大，所以适合一些简单参数的传递，如某个模板元素的状态。

环境配置
系统：windows
平台：visual studio code
语言：javascript、html
库：nodejs

概述
本文是作为一个记录，记录已经实现的功能，对于web之间的数据通讯与共享有很多方法，也有很多框架来实现，但本文只是记录在两个html网页间本地跳转时，通过浏览器localStorage本地存储来传递数据的一种方式。

代码实现

Step1、创建两个html文件

我们创建两个测试的html文件，分别命名为index.html、about.html，然后为每个网页添加一些代码，本例中，为每个网页添加一个侧边导航栏，添加一个切换按钮，以及两个菜单项，可以点击跳转到另一个网页。
index.html：

<!DOCTYPE html>
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8" />
        <title>页面跳转测试</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body class="main">
        <div class="sidebar" id="sidebar">
            <button class="menubutton" id="menuButton">菜单</button>
            <ul>
                <li><a href="index.html">首页</a></li>