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

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

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

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

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

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



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