前端页面间数据传递常用的几种方式

2023-11-02

1、常用方式

  • url页面路径携带参数传递
  • localStorage方式传递
  • sessionStorage方式传递
  • cookie的方式传递

2、方式对比


url字节限制可以参考这一篇文章《HTTP中的URL长度限制》

其中cookie的setCookie和getCookie的JS简单实现:

/** * 设置cookie 
    * @param {String} cookie_name key值 
    * @param {*} value 值 
    * @param {*} expireTime 时长 
    */
function setCookie(cookie_name, value, expireTime){    
    //获取当前时间    
    var exdate = new Date()    
    //设置时间    
    exdate.setTime(exdate.getDate() + expireTime)   //例:1天expireTime = 24 * 60 * 60 * 1000    
    //设置cookie,escape对特殊字符加密,对于unescape对特殊字符解密    
    document.cookie = cookie_name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
/** * 取值cookie 
    * @param {String} cookie_name  
    */
function getCookie(cookie_name){    
    //判断是否存在cookie        
    if (document.cookie.length > 0){
    //查询cookie开始部分        
    cookie_start = document.cookie.indexOf(cookie_name + "=")        
    //如果存在        
        if (cookie_start != -1){             
            //计算结束部分            
            cookie_start = cookie_start + cookie_name.length + 1             
            cookie_end = document.cookie.indexOf(";", cookie_start)            
            //如果已经是最后一个cookie值,则取cookie长度            
            if (cookie_end == -1) {                
                cookie_end = document.cookie.length             
            }            
            //获取cookie值,unescape对特殊字符解密            
            return unescape(document.cookie.substring(cookie_start,cookie_end))        
        }     
    }    
    //其它情况返回空    
    return ""
}复制代码

3、借助后端的一些方式

  • session存储后访问相应页面传递
  • 数据库存储后访问相应页面传递


转载于:https://juejin.im/post/5cd1a57ef265da0385580f46

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

前端页面间数据传递常用的几种方式 的相关文章

  • 图解python | 字符串及操作

    1 Python元组 Python的元组与列表类似 不同之处在于元组的元素不能修改 元组使用小括号 列表使用方括号 元组创建很简单 只需要在括号中添加元素 并使用逗号隔开即可 tup1 ByteDance ShowMeAI 1997 202
  • 通俗易懂,十分钟读懂DES,详解DES加密算法原理,DES攻击手段以及3DES原理

    文章目录 1 什么是DES 2 DES的基本概念 3 DES的加密流程 4 DES算法步骤详解 4 1 初始置换 Initial Permutation IP置换 4 2 加密轮次 4 3 F轮函数 4 3 1 拓展R到48位 4 3 2
  • 基于java的学生宿舍管理系统设计与实现

    基于java的学生宿舍管理系统设计与实现 I 引言 A 研究背景和动机 基于Java的学生宿舍管理系统设计与实现的研究背景和动机 在数字化时代的推动下 学生宿舍管理系统已经成为了管理学生宿舍的重要工具 学生宿舍管理系统能够帮助管理者更好地管
  • 软件测试|SQLAlchemy环境安装与基础使用

    简介 SQLAlchemy 是一个强大的 Python 库 用于与关系型数据库进行交互 它提供了高度抽象的对象关系映射 ORM 工具 允许使用 Python 对象来操作数据库 而不必编写原生SQL查询 本文将介绍如何安装 SQLAlchem
  • 【计算机毕业设计】电商个性化推荐系统

    伴随着我国社会的发展 人民生活质量日益提高 于是对电商个性化推荐进行规范而严格是十分有必要的 所以许许多多的信息管理系统应运而生 此时单靠人力应对这些事务就显得有些力不从心了 所以本论文将设计一套电商个性化推荐系统 帮助商家进行商品信息 在
  • 【计算机毕业设计】二手家电管理平台

    时代在飞速进步 每个行业都在努力发展现在先进技术 通过这些先进的技术来提高自己的水平和优势 二手家电管理平台当然不能排除在外 二手家电管理平台是在实际应用和软件工程的开发原理之上 运用java语言以及前台VUE框架 后台SpringBoot
  • 【ES6】解构语句中的冒号(:)

    在解构赋值语法中 冒号 的作用是为提取的字段指定一个新的变量名 让我们以示例 const billCode code version route query 来说明 billCode code version 表示从 route query
  • 低代码配置-列表页组件设计

    保存 表单属性存放 bill 筛选项配置存放 filterLayout 列表按钮存放 buttonLayout 列表布局存放 listLayout api存放 api 数据结构 layout 存放表单基础配置 bill 存放按钮基础配置 b
  • 低代码-详情页组件设计

    效果图 详情页数据结构定义 layout 按钮数据 buttonLayout headButton 页头按钮 footButton 页脚按钮 详情页表单配置 config 配置组件列表 detailLayout 默认行为 进表单初始化 只展
  • SpringBoot中整合ElasticSearch快速入门以及踩坑记录

    场景 若依前后端分离版手把手教你本地搭建环境并运行项目 若依前后端分离版手把手教你本地搭建环境并运行项目 本地运行若依前后端分离 CSDN博客 参考上面搭建项目 ElaticSearch Elasticsearch 是java开发的 基于
  • 数据库 | 面试官:一次到底插入多少条数据合适啊?.....面试连环炮

    数据库 面试官 一次到底插入多少条数据合适啊 面试连环炮 数据库插入操作的基础知识 插入数据是数据库操作中的基础 但是 我们程序员将面临随之而来的问题 如何快速有效地插入数据 并保持数据库 性能 当你向数据库中插入数据时 这些数据直接存储到
  • (2024最新整理)Java最全八股文及答案!

    Java的特点 Java是一门面向对象的编程语言 面向对象和面向过程的区别参考下一个问题 Java具有平台独立性和移植性 Java有一句口号 Write once run anywhere 一次编写 到处运行 这也是Java的魅力所在 而实
  • MongoDB - 库、集合、文档(操作 + 演示 + 注意事项)

    目录 一 MongoDB 1 1 简介 a MongoDB 是什么 为什么要使用 MongoDB b 应用场景 c MongoDB 这么强大 是不是可以直接代替 MySQL d MongoDB 中的一些概念 e Docker 下载 1 2
  • 毕业设计:基于python人脸识别系统 LBPH算法 sqlite数据库 (源码)✅

    博主介绍 全网粉丝10W 前互联网大厂软件研发 集结硕博英豪成立工作室 专注于计算机相关专业 毕业设计 项目实战6年之久 选择我们就是选择放心 选择安心毕业 感兴趣的可以先收藏起来 点赞 关注不迷路 毕业设计 2023 2024年计算机毕业
  • 温室气体排放更敏感的模型(即更高的平衡气候敏感性(ECS))在数年到数十年时间尺度上也具有更高的温度变化(Python代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Python代码 数据
  • 2024最强Java面试八股文合集(持续更新)

    今天要谈的主题是关于求职 求职是在每个技术人员的生涯中都要经历多次 对于我们大部分人而言 在进入自己心仪的公司之前少不了准备工作 有一份全面细致 面试题 将帮助我们减少许多麻烦 在跳槽季来临之前 特地做这个系列的文章 一方面帮助自己巩固下基
  • 每日变更的最佳实践

    在优维公司内部 我们采用发布单的方式进行每天的应用变更管理 这里给各位介绍优维的最佳实践 变更是需要多角色合作的 而且他是整体研发流程的一部分 在优维内部 我们坚持每日变更 打通开发环节到最终发布上线的全过程 在保证质量的前提下 尽可能提升
  • SAP ERP系统是什么?SAP好用吗?

    A公司是一家传统制造企业 公司曾先后使用过数个管理软件系统 但各部门使用的软件都是单独功能 导致企业日常管理中数据流与信息流相对独立 形成了 信息孤岛 随着公司近年业务规模的快速发展以及客户数量的迅速增加 企业原有的信息系统在销售预测及生产
  • 深入解析 YAML 配置文件:从语法到最佳实践

    一 认识YAML YAML YAML Ain t Markup Language 是一种人类可读的数据序列化语言 它的设计目标是使数据在不同编程语言之间交换和共享变得简单 YAML采用了一种简洁 直观的语法 以易于阅读和编写的方式表示数据结
  • Spring Boot引起的“堆外内存泄漏”排查及经验总结

    Spring Boot引起的 堆外内存泄漏 排查及经验总结 背景 为了更好地实现对项目的管理 我们将组内一个项目迁移到MDP框架 基于Spring Boot 随后我们就发现系统会频繁报出Swap区域使用量过高的异常 笔者被叫去帮忙查看原因

随机推荐

  • 《STL源码剖析》(四)——序列式容器

    1 序列式容器 所谓序列式容器 其中的元素都可序 但未必有序 C 本身提供了一个序列式容器array STL另外提供了vector list deque stack queue priority queue等序列式容器 其中stack和qu
  • C++知识总结(内附超详细知识框架图)

    C 知识总结 由于在学习C 的同时博主也在学习Linux系统编程 Linux网络编程以及数据库 所以从开始学习C 到现在结束已经有一年多时间了 C 是博主学习的第一个面向对象的语言 在学习过程中也是逐渐体会到了面向对象编程的种种好处 但C
  • 第十二章 YOLO的部署实战篇(下篇)

    文章目录 前言 专栏概括 1 cuda教程目录 2 cuda教程背景 3 cuda教程内容 一 yolov5部署整体逻辑 1 yolov5的main函数 2 yolo h头文件 3 整体架构显示 二 yolov5模型的onnx转engne代
  • oracle tmp表空间不足,临时表空间不足引起的ORA-01114错误

    数据库程序突遇ORA 01114错误 提示内容如下 错误原因 Select error ORA 01114 将块写入文件 时出现 IO 错误 块 ORA 27069 skgfdisp 尝试在文件范围外执行 I O OSD 04026 无效的
  • Unity + vuforia 开发虚拟按钮

    首先在创建虚拟按钮之前 还是要首先了解imageTarget的创建方式 我自己时参考dzyi的博客弄的 推荐大家 写的很详细 地址 http blog csdn net dzyi article details 22898929 创建虚拟按
  • 有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

    Apple 算是最重视应用开发体验的公司了 从Xib到StoryBoard 从Auto Layout到Size Class 每一次的更新 都会给iOS应用的开发带来不小的便利 但是 对于绝对多数iOS攻城狮来说 我们依然还是很害怕写UITa
  • 解决docker pull 很慢的问题

    再docker拉取镜像时 花费时间太长 用如下方法可以解决 root localhost mkdir p etc docker root localhost cat etc docker daemon json registry mirro
  • mysql Undo Tablespaces

    分离 undo 表空间相关的参数 innodb undo directory 指定单独存放 undo 表空间的目录 默认为 即 datadir 可以设置相对路径或者绝对路径 该参数实例初始化之后虽然不可直接改动 但是可 以通过先停库 修改配
  • 联想工作站光盘或WinPE重装Win7找不到SSD和另外一个2T磁盘

    工作站比较老了 苏州重启系统修了 应该是原来的SSD硬盘损坏 修复工具无法修复 只能重装了 由于某一应用软件要求 只能装Win7系统 使用老毛桃制作的WinPE进去看了分区 安装系统时无法找到新的SSD盘和之前的2T磁盘
  • PLC的通信模式

    说到PLC的通讯模式 主要有两种 一种是并行通讯模式 一种是串行通讯模式 这两种通信模式有什么区别呢 PLC串行通信 串行通信一般是用二进制的位 BIT 为单位的数据传输方式 每次都只传送一位 然后除了地线之外 在一个数据传输方向上面只要一
  • element tree树形结构接口不支持搜索、懒加载情况下实现搜索

    目前项目中 element tree树形结构由于数据太多使用了懒加载 并且接口不支持搜索 只能由前端实现搜索功能 暂时按照自己思路实现功能 思路为 输入搜索内容后 直接遍历树形结构的数据 通过filter筛选出结果之后再赋值给树形结构 de
  • matlab径向分布函数作图_分子动力学的径向分布函数绘制

    这是过冷水之前在工作中的一张图片 这张图片的实际含义是以坐标原点为参考点 距离原点距离x处的小球个数f x 分布图 这个问题理解起来好容易 统计距离和小球个数的关系 but实际问题是过冷水要处理的是这样的问题 请问请告诉我随意找一个小球为原
  • 小团队管理核心(一)

    主管应该投身具体业务还是专注于管理 投身业务 or 专注管理 主管应该投身具体业务还是专注于管理 一 主管的定位 二 如何实现老板目标 三 主管应当专注管理 一 主管的定位 定位简述 通过下属实现经营者目标的人 定位解析 由此看来我们的目标
  • ThreeJS第一人称视角处理

    简介 第一人称控件指针锁定API允许您在游戏界面中锁定鼠标或其他指针设备 以便您不用绝对定位光标就可以获得坐标变化值 从而准确地判断用户正在做什么 并且还可以防止用户意外地进入另一块屏幕或别的什么地方 从而导致误操作 在ThreeJs中实现
  • Python 查看数据类型与格式

    一般我们拿到一个数据 会先看一下这个数据有多少行多少列 各个字段是什么 数据格式类型是什么 在开始讲数据格式前 需要先梳理一下各个数据类型 我们常使用的库一般是numpy和pandas Numpy下的核心是数组 array ndarray
  • Redis支持哪几种数据类型?

    Redis支持哪几种数据类型 1 什么是Redis 2 优缺点 3 Redis相比Memcached有哪些优势 4 Redis支持的数据类型 4 1 String 字符串 4 2 List 列表 4 3 Set 集合 4 4 Sorted
  • HTTPS原理(证书验证+数据传输)

    HTTPS协议相关的概念有SSL 非对称加密 CA证书等 为什么用了HTTPS就是安全的 HTTPS底层原理如何实现 用了HTTPS就一定安全吗 HTTPS实现原理 HTTPS在内容传输上的加密使用的是对称加密 证书验证阶段使用非对称加密
  • 图像评价指标(python)

    图像评价指标的综合记录 一 信息熵 熵是衡量图像中所包含的信息量的大小 熵越大说明包含的信息越多 意味着可以从处理后的图像中获取更多的信息 用信息熵来计算图像的熵值 代码 import cv2 import numpy as np impo
  • C 标准库 - 《stdio.h》

    原文链接 https www runoob com cprogramming c standard library stdio h html 简介 stdio h 头文件定义了三个变量类型 一些宏和各种函数来执行输入和输出 库变量 下面是头
  • 前端页面间数据传递常用的几种方式

    1 常用方式 url页面路径携带参数传递 localStorage方式传递 sessionStorage方式传递 cookie的方式传递 2 方式对比 url字节限制可以参考这一篇文章 HTTP中的URL长度限制 其中cookie的setC