前端页面之间传输数据 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>
相关推荐
_oP_i5 分钟前
dify之Web 前端工作流编排(Workflow Builder)
前端·dify
Moment9 分钟前
快手前端校招一面面经 🤔🤔🤔
前端·javascript·面试
搬砖的工人11 分钟前
记录WinFrom 使用 Autoupdater.NET.Official 进行软件升级更新
java·前端·.net
掘根24 分钟前
【Protobuf】proto3语法详解1
开发语言·前端·javascript
IT_陈寒34 分钟前
SpringBoot 3.2新特性盘点:这5个隐藏功能让你的开发效率翻倍 🚀
前端·人工智能·后端
艾小码1 小时前
从入门到精通:JavaScript异步编程避坑指南
前端·javascript
七度光阴;1 小时前
Web后端登录认证(会话技术)
前端·tlias智能辅助系统
菜鸟una2 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'4 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静9 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能