前端页面之间的传值

2023-10-30

 有两种方法cookie和localStorage/sessionStorage

cookie

  • 工具方法封装:
     
    var operator="=";
    
        function getCookieValue(keyStr) {
            var value=null;
            var s=window.document.cookie;
            var arr=s.split("; ");
            for (var i = 0; i < arr.length; i++) {
                var str=arr[i];
                var k=str.split(operator)[0];
                var v=str.split(operator)[1];
                if (k==keyStr){
                    value = v;
                    break;
                }
            }
            return value;
        }
        function setCookieValue(key,value) {
            document.cookie=key+operator+value;
    
        }
    
  •   A页面
    setCookieValue("username",userInfo.username);
    setCookieValue("userImg",userInfo.userImg);
  •  B页面
    var name=getCookieValue("username");
    var userImg=getCookieValue("userImg");

    localStorage和sessionStorage

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问
    并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅、是会话级别的存储。只允许同一窗口访问。
     

    而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。同源可以读取并修改localStorage数据。

    并且他们储存的对象类型均为字符串类型;

  • A页面

    localStorage.setItem("user",JSON.stringify(userInfo));
  • B页面

    var jsonStr = localStorage.getItem("user");
    var userInfo = eval("("+jsonStr+")");
    ​
    //移出localStorage键值对
    localStorage.removeItem("user");   

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端页面之间的传值 的相关文章

随机推荐

  • 前端学习之原生JS实现attr方法的封装

    HTML代码 img src images 1 jpg alt JS代码 功能 1 参数为2个 设置 2 参数为1个 设置批量属性 获取属性 function attr property value console log property
  • ubuntu18.04配置Swin Transformer环境

    1 安装pytorch pip install torch 1 8 1 i https pypi douban com simple pip install torchvision 0 9 1 i https pypi douban com
  • 电脑打开计算机显示远程过程调用失败,win7系统电脑弹出提示“远程过程调用失败且未执行”的解决方法...

    win7系统使用久了 好多网友反馈说win7系统电脑弹出提示 远程过程调用失败且未执行 的问题 非常不方便 有什么办法可以永久解决win7系统电脑弹出提示 远程过程调用失败且未执行 的问题 面对win7系统电脑弹出提示 远程过程调用失败且未
  • java 原始套接字编程_套接字编程原理

    6 多路复用 select 功能 用来检测一个或多个套接字状态 格式 int PASCAL FAR select int nfds fd set FAR readfds fd set FAR writefds fd set FAR exce
  • android里面layer-list中的inset和clip到底有什么作用

    Inset Drawable 用于通过指定的间距把图片插入到XML中 它在View需要比自身小的背景时常用 有些像padding的作用 例子 第一步 drawable文件中建立inset drawable xml
  • DB与缓存一致性

    一般方案中的设计均有其缺陷 要么会产生脏数据 要么会产生不一致 不同的是代价和概率 更新数据时 是先删除缓存再更新DB 还是先更新DB再删除缓存 https blog csdn net qq 33999844 article details
  • unity 如何获取到屏幕中间_Unity UGUI获取鼠标在屏幕的准确点击位置

    想要获取鼠标在屏幕的准确点击位置 千万不要胡乱写 什么转化坐标系 什么Ray射线检测都是浮云 1 转化坐标系只是相对而言 并不能准确实现当前鼠标点击在屏幕的位置 2 Ray检测 hit是需要碰撞的 没碰撞 获取的是什么 0 0 0 所以 请
  • css的选择器

    一 基本标签 标签选择器 格式 标签名 h1 文本内容 h1 类名选择器 格式 类名
  • Eclipse中断点调试详解

    小编是刚学习Java两个月 在学习视频中看到老师玩断点6到飞起 自己也就各种查资料 实施并总结了一下断点的调试 找到需要设置断点的位置 你可能会问 我怎么知道在哪设置断点呢 如果你实在不知道在哪设置断点 那你完全可以多设置几个断点 单步调试
  • Power小型机概念输理

    一 基本概念 一 Power System服务器POWER AIX RISC CISC SMT QCM SP Hypervisor LPAR POWER Performance Optimization With Enhanced RISC
  • Vue的样式绑定

    一 绑定class 1 第一种 样式和数据的绑定 通过对象方式 v bind class设置一个对象 当isActivated为true的时候 div上会增加一个class属性 属性名称为activated 如果再在css里加上activa
  • 推荐10个堪称神器的学习网站,IT学习网站

    挑选了 10 个堪称神器的学习网站 推荐给大家 如果觉得不错的话 文末请点赞 01 大学资源网 大学资源网是一个完全免费并且功能非常强大的学习网站 它免费提供了丰富并且全面的学习视频教程 并且视频课程一直在更新 非常良心 我比较看重的是它里
  • 前几天面了个32岁的测试员,年薪50w问题基本都能回答上,应该刷了不少八股文···

    互联网行业竞争是一年比一年严峻 作为测试工程师的我们唯有不停地学习 不断的提升自己才能保证自己的核心竞争力从而拿到更好的薪水 进入心仪的企业 阿里 字节 美团 腾讯等大厂 所以 大家就迎来了一堆问题 自己目前的能力能不能够支撑自己晋升 如果
  • php原生发送邮件

  • C++(24)——语言级别提供的四种类型强转的方式

    前言 不同于C语言的类型转换的不安全性 无检查机制 比如没有关系的类型间的转换 C 提供了更多的类型转换方式 语言级别提供的四种类型强转的方式 const cast 去掉 指针或引用 常量属性的类型转换 static cast 提供编译器认
  • 深入理解Plasma(3):Plasma MVP

    这一系列文章将围绕以太坊的二层扩容框架 介绍其基本运行原理 具体操作细节 安全性讨论以及未来研究方向等 本篇文章主要介绍 Plasma 的一个最小实现 Plasma MVP Minima Viable Plasma 在上一篇文章中我们已经理
  • 默认显示DrawDefaultInspector and OnInspectorGUI

    Unity Trick 1 Make an inspector for any ScriptableObject Mark Wahnish on Aug 31 2015 Over the course of development I m
  • 恢复Redis中主、从库宕机

    1 什么是哨兵 哨兵是对Redis的系统的运行情况的监控 它是一个独立进程 功能有二个 监控主数据库和从数据库是否运行正常 主数据出现故障后自动将从数据库转化为主数据库 2 原理 单个哨兵的架构 多个哨兵的架构 多个哨兵 不仅同时监控主从数
  • JAVA获取html页面中表格的数据,并把它转存到数据库

    一 使用技术 java mysql 需要实现的功能 获取html页面中表格的数据 并且把它转存到mysql数据库中 实现思路 1 通过java url处理中的url和urlconnection获取到html页面的信息 java url学习链
  • 前端页面之间的传值

    有两种方法cookie和localStorage sessionStorage cookie 工具方法封装 var operator function getCookieValue keyStr var value null var s w