前端页面之间传输数据 localStorage

效果

发送方

接收方

localStorage 的使用

c 复制代码
// 保存数据
localStorage.setItem('key', value);
// 获取数据
localStorage.getItem('key');

发送方

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
    <form action="input_test_action.html" method="post"
        onsubmit="return f()">
        <p>
            用户名:<input type="text" name="username" id="username">
        </p>
        <p>
            密码:<input type="text" name="pwd" id="pwd">
        </p>
        <p>
            <input type="reset"> <input type="submit">
        </p>
    </form>

    <script>
        function f()
        {
            var username = document.getElementById('username');
            var pwd = document.getElementById('pwd');
            localStorage.setItem('username', username.value);
            localStorage.setItem('pwd', pwd.value);
        }
    </script>
</body>
</html>

接收方

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录结果</title>
</head>
<body>
<p>Username: <span id="username"></span></p>
<p>Password: <span id="pwd"></span></p>
<script>
    const username = localStorage.getItem('username');
    const pwd = localStorage.getItem('pwd');
    // 将数据渲染到页面上
    document.getElementById('username').textContent = username;
    document.getElementById('pwd').textContent = pwd;
</script>
</body>
</html>
相关推荐
AliPaPa7 分钟前
你可能忽略了useSyncExternalStore + useOptimistic + useTransition
前端·react.js
parade岁月18 分钟前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
小帆聊前端20 分钟前
Lodash 深度解读:前端数据处理的效率利器,从用法到原理全拆解
前端·javascript
Harriet嘉39 分钟前
解决Chrome 140以上版本“此扩展程序不再受支持,因此已停用”问题 axure插件安装问题
前端·chrome
FuckPatience44 分钟前
前端Vue 后端ASP.NET Core WebApi 本地调试交互过程
前端·vue.js·asp.net
Kingsdesigner1 小时前
从平面到“货架”:Illustrator与Substance Stager的包装设计可视化工作流
前端·平面·illustrator·设计师·substance 3d·平面设计·产品渲染
一枚前端小能手1 小时前
🔍 那些不为人知但是好用的JS小秘密
前端·javascript
屿小夏1 小时前
JSAR 开发环境配置与项目初始化全流程指南
前端
微辣而已1 小时前
next.js中实现缓存
前端
Dcc1 小时前
纯 css 实现前端主题切换+自定义方案
前端·css