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

2024-07-17 11:04:02 +08:00
 gosky
比如
用户在一个页面写了一个帖子。帖子内容可能有几百甚至上千字
发表时,跳转到另一个页面,在新页面把帖子提交给后端

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

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

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



微信小程序有提供页面通信 api
superedlimited
2024-07-17 11:22:35 +08:00
微信小程序用 event channel
estk
2024-07-17 11:35:12 +08:00
mobx 等状态管理?
sessionstorage ?
wanguorui123
2024-07-17 11:55:28 +08:00
localstorage
windliang
2024-07-17 12:25:54 +08:00
数据挂到 app 实例上
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
2024-07-17 13:22:34 +08:00
存到本地就好了,简单方便,不用想那么多
duanxianze
2024-07-17 13:25:24 +08:00
再补充,不仅简单方便,而且易于跨平台,还易维护,哪怕忘了删也没事,前端不差这一点空间
wxrbw555
2024-07-17 13:59:32 +08:00
@windliang #8 +1
LHRUN
2024-07-17 14:42:14 +08:00
方案太多了, 自带的有 event channel , 或者自己写一个公用的方法,或者存到 app 或者本地都行,看你们的习惯
zhtyytg
2024-07-17 14:51:30 +08:00
提交还得先跳转一次页面? kidding?
daysv
2024-07-17 15:07:05 +08:00
在某些情况,比如 app 内,localstorage 加定时器也能凑合。
hoshizukiko
2024-07-17 15:42:58 +08:00
我这是有个公用的 js 类专门处理页面传递.
跳转的时候存,到了下一个页面的 onload 之类的地方取并且删除就行了
yKXSkKoR8I1RcxaS
2024-07-17 15:56:02 +08:00
localstorage 最完美的办法,还可以和自动保存兼容。
otakustay
2024-07-17 16:17:29 +08:00
sessionStorage 吧,这种数据用 localStorage 还是有点不太合适?
nekochyan
2024-07-17 16:27:06 +08:00
如果是同一个小程序,挂载 APP 实例上就好了,类似于全局变量;如果是跳转到其他小程序,需要用到官方 API
emws31
2024-07-17 16:30:41 +08:00
在 h5 碰到这种问题了。localstorage 有 5M 存储上限,这种大参数不合适。找个压缩工具压一下再存入 localstorage ,或者使用 9 楼的方案比较好。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1057948

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX