首页 > 其他分享 >前端页面之间传输数据 localStorage

前端页面之间传输数据 localStorage

时间:2024-02-20 17:02:04浏览次数:29  
标签:username getElementById setItem 传输数据 pwd localStorage document 页面

效果

发送方

接收方

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>

标签:username,getElementById,setItem,传输数据,pwd,localStorage,document,页面
From: https://www.cnblogs.com/sandersshine/p/18023515

相关文章

  • 前端知识汇总2(css,css2, 页面布局,移动端适配)
    固定定位(fixed)固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时,即可将元素的定位模式设置为固定定位。当对无素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条......
  • html页面直接回显接口返回的图片文件流
    <imgsrc="http://127.0.0.1:8081/t1/img">@GetMapping("/img")@SneakyThrowspublicvoidtest01(HttpServletResponseresponse){Stringjp=Jie截屏.jp(0,0,300,200,"D:\\桌面文档\\123.png");......
  • Vite+Vue3+TS创建前端页面,收费教程都没有这么详细
    原文地址:https://mp.weixin.qq.com/s/HqLgf2TCVqnndSxJw_1RTQ一、准备工作在学习之前,需要安装两个工具,一个是IDE,一个是Node.js:VsCode: https://code.visualstudio.com/DownloadNode.js: http://nodejs.cn/download/安装过程略,安装好之后,为了在vscode中能智能提示和运行,......
  • nativeUI页面table列表显示,render渲染函数
    {key:'type',title:$t('cmdType'),width:150,align:'center',render(t){switch(t.type){case2:returnh('span',{......
  • docker 搭建最新minio访问不了页面解决
    一.搭建过程#可以查找minio的版本,找到下载次数最多的dockersearchminio#拉取minio镜像dockerpullminio/minio#创建容器,两个key分别是登录的账号和密码,密码必须为8位dockerrun-d-p9000:9000--name=minio--restart=always-e"MINIO_ROOT_USER=admin"-e"M......
  • 前端衡量页面性能的指标都有哪些?
    以用户为中心的性能指标FirstPaint首次绘制(FP)Firstcontentfulpaint首次内容绘制(FCP)Largestcontentfulpaint最大内容绘制(LCP)Firstinputdelay首次输入延迟(FID)TimetoInteractive可交互时间(TTI)Totalblockingtime总阻塞时间(TBT)Cumulativelayoutshift累......
  • 刷新后记忆上一次的查询参数、页面位置
    需求目前页面缓存机制是keep-alive,即点击之前页签,页面不刷新。这会导致:数据不是最新的,即在页签A操作数据后,点击之前打开的页签B,页签B的数据仍然是旧的。需求:再次点击页签B时,根据之前的查询参数(包括页码)、树节点、屏幕高度(下文统称为“查询数据”)刷新页面,即实现静默刷新......
  • 博客园跳转编辑页面没有重新加载页面 pushState
    博客园前端是用angular写的全局搜索pushState,打断点,可以看到 pushState main.6267e7d35558bee5.is:1gomain.6267e7d35558bee5.js:1setBrowserUrl main.6267e7d35558bee5.js:1 setBrowserUrl(p,I){constQ=this.urlSerializer.serialize(p)......
  • 页面设计
    权限管理设计布局设置accessEnum.tsconstACCESS_ENUM={NOT_LOGIN:"notLogin",USER:"user",ADMIN:"admin",};exportdefaultACCESS_ENUM;checkAccess.ts这个用于检查权限,参数是传递过来跳转路由需要的权限然后这里面获取登录用户的权限,两个对比例如这......
  • Chrome下载页面链接的cookie
    从chrome下载文件时,复制链接到其他软件下载,多数情况是无法下载,原因是链接的cookie没有复制过去可以从浏览器的链接地址,点击左边,可以查看网站使用的cookie,复制过去可以下载想办法用软件从外部获取chrome的cookie,过程cookie储存在本地文件,在chrome的UserDataDi......