V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
gosky
V2EX  ›  前端开发

前端怎么在页面之间传输大参数?

  •  
  •   gosky · 2024-07-17 11:04:02 +08:00 · 2636 次点击
    这是一个创建于 411 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如
    用户在一个页面写了一个帖子。帖子内容可能有几百甚至上千字
    发表时,跳转到另一个页面,在新页面把帖子提交给后端

    当前其中一个办法是交给后端保存,把后端给的 id 作为 url 参数传给新页面。但这里不考虑后端
    如果是全部作为 url 参数,url 参数可能受限
    一个方法是存到本地缓存,新页面取本地缓存,再删本地缓存
    不知道还有没有更好的办法?

    环境是微信小程序
    写代码的本是后端程序员,最近开始试着写前端
    21 条回复    2024-07-17 16:31:52 +08:00
    FrankFang128
        1
    FrankFang128  
       2024-07-17 11:12:27 +08:00
    postMessage
    tool2dx
        2
    tool2dx  
       2024-07-17 11:13:33 +08:00
    一般都是 postMessage ,接收方写 window.addEventListener('message', (event) => {});
    bojackhorseman
        3
    bojackhorseman  
       2024-07-17 11:17:21 +08:00   ❤️ 1
    “发表时,跳转到另一个页面,在新页面把帖子提交给后端”,为什么不提交后再跳转页面?
    bojackhorseman
        4
    bojackhorseman  
       2024-07-17 11:21:45 +08:00   ❤️ 4
    你标题最好改成微信小程序,不然大家给的解决方案未必适用。

    https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html



    微信小程序有提供页面通信 api
    superedlimited
        5
    superedlimited  
       2024-07-17 11:22:35 +08:00 via iPhone
    微信小程序用 event channel
    estk
        6
    estk  
       2024-07-17 11:35:12 +08:00 via iPhone
    mobx 等状态管理?
    sessionstorage ?
    wanguorui123
        7
    wanguorui123  
       2024-07-17 11:55:28 +08:00
    localstorage
    windliang
        8
    windliang  
    PRO
       2024-07-17 12:25:54 +08:00 via Android
    数据挂到 app 实例上
    michaelluang
        9
    michaelluang  
       2024-07-17 13:05:52 +08:00
    创建一个对象实例,在不同页面中引用这个对象实例。
    ```
    // postModel.js
    class PostModel {
    constructor() { this.post = ''; }
    get post() { return this._post; }
    set post(post) { this._post = post; }
    }
    const postData = new PostModel();
    export default postData;

    // pageA
    import postData from './postModel.js';
    postData.post = 'new post';

    // pageB
    import postData from './postModel.js';
    const post = postData.post;
    ```
    duanxianze
        10
    duanxianze  
       2024-07-17 13:22:34 +08:00
    存到本地就好了,简单方便,不用想那么多
    duanxianze
        11
    duanxianze  
       2024-07-17 13:25:24 +08:00
    再补充,不仅简单方便,而且易于跨平台,还易维护,哪怕忘了删也没事,前端不差这一点空间
    wxrbw555
        12
    wxrbw555  
       2024-07-17 13:59:32 +08:00
    @windliang #8 +1
    LHRUN
        13
    LHRUN  
       2024-07-17 14:42:14 +08:00
    方案太多了, 自带的有 event channel , 或者自己写一个公用的方法,或者存到 app 或者本地都行,看你们的习惯
    zhtyytg
        14
    zhtyytg  
       2024-07-17 14:51:30 +08:00
    提交还得先跳转一次页面? kidding?
    daysv
        15
    daysv  
       2024-07-17 15:07:05 +08:00
    在某些情况,比如 app 内,localstorage 加定时器也能凑合。
    hoshizukiko
        16
    hoshizukiko  
       2024-07-17 15:42:58 +08:00
    我这是有个公用的 js 类专门处理页面传递.
    跳转的时候存,到了下一个页面的 onload 之类的地方取并且删除就行了
    yKXSkKoR8I1RcxaS
        17
    yKXSkKoR8I1RcxaS  
       2024-07-17 15:56:02 +08:00
    localstorage 最完美的办法,还可以和自动保存兼容。
    otakustay
        18
    otakustay  
       2024-07-17 16:17:29 +08:00
    sessionStorage 吧,这种数据用 localStorage 还是有点不太合适?
    nekochyan
        19
    nekochyan  
       2024-07-17 16:27:06 +08:00
    如果是同一个小程序,挂载 APP 实例上就好了,类似于全局变量;如果是跳转到其他小程序,需要用到官方 API
    emws31
        20
    emws31  
       2024-07-17 16:30:41 +08:00
    在 h5 碰到这种问题了。localstorage 有 5M 存储上限,这种大参数不合适。找个压缩工具压一下再存入 localstorage ,或者使用 9 楼的方案比较好。
    Vegetable
        21
    Vegetable  
       2024-07-17 16:31:52 +08:00
    我是真的很难理解为什么前端们会有让后端存页面状态这种想法。
    我是真的遇到过,要求后端把上一个页面提交的数据,再下一个页面返回过来这种前端。
    最经典的就是把什么 checked:true, idx:1 这种莫名其妙的属性一起发给后端让后端保存。
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1107 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 18:18 · PVG 02:18 · LAX 11:18 · JFK 14:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.