前端页面之间传输数据 localStorage

效果

发送方

接收方

localStorage 的使用

// 保存数据
localStorage.setItem('key', value);
// 获取数据
localStorage.getItem('key');

发送方

<!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>

接收方

<!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>
posted @   小松鼠树懒  阅读(27)  评论(0)  编辑  收藏  举报
相关博文：
·  代码规范自查
·  C++返回值优化 RVO 和 NRVO
·  两个html页面或多个页面间数据传送（localStorage方法）
·  前端存储：localStorage、sessionStorage
·  localStorage和sessionStorage
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
· 如何调用 DeepSeek 的自然语言处理 API 接口并集成到在线客服系统
点击右上角即可分享
微信分享提示
SQL AI 助手