在浏览器里面大多用什么方式做存储

This topic created in 2794 days ago, the information mentioned may be changed or developed.

过去从没在浏览器里写过存很多数据的事情，都是用 ajax 传到服务器里，在 localstorage 只存几个标志位

现在公司项目里有一个需求，就是在浏览器本地存储一些标题，时间，作者昵称之类的，有点 sns 风格的产品，这样就能够避免过多的 ajax 请求了，毕竟感觉 80%的数据都是不变的

百度了点资料，说浏览器的存储能力有限，localstorage 只能存 2M 的东西，我试了一下，好像我们的产品最多的情况下需要大约 15MB 到 40MB 的 json 才能存下所有不怎么变化的数据

除了 localstorage 还有没有更好的方法做这种浏览器端的存储？

补充一下需求，客户要求浏览器要支持 Chrome,Firefox,edge, Android, iOS, 360，猎豹

浏览器

ajax

存储

标志位

17 replies • 2018-10-18 15:23:56 +08:00

yingfengi

Oct 14, 2018 via Android

有点奇葩的需求。。。

1iuh

Oct 14, 2018

把这些数据放一个 js 文件里面，正常引用就好，服务器这边设置好返回的 Header 即可，静态文件浏览器自己会缓存。

fyibmsd

Oct 14, 2018

一本红楼梦才 1MB 好吗

hronro

Oct 14, 2018

indexDB

jiafaner

Oct 14, 2018

@yingfengi
@fyibmsd

很奇葩的需求，场景其实是因为最初用 C#给客户做的本地软件，有很多很多数据都是本地存储，后来做了第二版是 WEB 的，现在只用 WEB 导致访问太多了

jiafaner

Oct 14, 2018

@1iuh 用这样的方法还是有点问题，因为有时候还会变更这些数据，所以更新的时候用 js 文件，会不知道什么时候更新

jiafaner

Oct 14, 2018

@hronro 我百度到了这个 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

能存 250M，足够用了

浏览器好强大，有数据库一样的东西，谢谢啦

imn1

Oct 14, 2018

访问太频繁，请使用 APP 扫码访问

mahonex

Oct 14, 2018 via iPhone

https://github.com/localForage/localForage 正在用和你使用场景差不多我们用来存二进制效果还可以

yhxx

Oct 14, 2018

15-40M.。。真可怕

Web SQL 或者 IndexedDB 吧

whileFalse

Oct 14, 2018

你们在用客户端的思路做 web。
如果服务器请求太多，看看是不是接口没设计好，拆的太散了。

jiafaner

Oct 14, 2018

@whileFalse 接口都是原来 CS 系统时候的接口改成了 HTTP 的，改服务端的成本太高了，很多逻辑都不清楚没办法只能想办法在客户端搞搞

whileFalse

Oct 14, 2018

@jiafaner
几个办法：
1. 搞个中间层服务器，把你们原始服务器上的数据添加上那些静态的玩意再返回客户端
2. 浏览器用到哪个数据再缓存到 localstorage 里。别一上来就直接拉 15m 的缓存啊。
3. 向楼上说的，搞个 js 存数据。js 带版本号。数据变了之后页面引用的版本号改一下。

jiafaner

Oct 14, 2018

@whileFalse 我们现在还准备搞一个进度条，在第一次加载的时候拉 15M 的东西回来，这样的思路好像不对

多谢你的方案，我得想想，这些接触得少，一下子不好理解

wbrobot

Oct 14, 2018 via iPhone

个人变成 V2EX 网友任务系列……

otakustay

Oct 14, 2018

那啥，其实不考虑直接用 HTTP Cache 搞定么，也没慢到哪里去

dalieba

Oct 18, 2018 via Android

@yhxx WebSQL 已经要淘汰了，W3C 推荐用 Web Storage 或者 IndexedDB