前端页面之间传输数据 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>
相关推荐
roman_日积跬步-终至千里20 分钟前
【系统架构设计(25)】Web应用服务器与现代架构
前端·架构·系统架构
yshhuang23 分钟前
在Windows上搭建开发环境
前端·后端
littleplayer24 分钟前
Redux在iOS中的使用
前端
跟橙姐学代码25 分钟前
Python里的“管家婆”:带你玩转os库的所有神操作
前端·python·ipython
jingling55525 分钟前
uniapp | 快速上手ThorUI组件
前端·笔记·前端框架·uni-app
UrbanJazzerati26 分钟前
可拖拽的进度条组件实战:实现思路与Demo
前端·面试
Cache技术分享29 分钟前
188. Java 异常 - Java 异常处理规范
前端·后端
不一样的少年_32 分钟前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码(附源码)
前端·vue.js·设计模式
一枚前端小能手35 分钟前
🔥 滚动监听写到手抽筋?IntersectionObserver让你躺平实现懒加载
前端·javascript
我是日安36 分钟前
从零到一打造 Vue3 响应式系统 Day 5 - 核心概念:单向链表、双向链表
前端·vue.js