利用localstorage实现本地消息缓存

公司的一款即时通讯web产品，之前设计的架构是聊天消息定期从IM服务器获取，这会导致如果用户刷新页面，会丢失最近的聊天对话消息。由于之前定时间隔在分钟级别，所以问题不是很明显。最近由于种种原因，消息同步间隔变长到小时级别，从而将消息丢失的问题凸显出来，工单不断。

设计思路

采用localstorage实现web端本地消息缓存是这次设计的主体思路。因为产品对低版本浏览器默认不支持，因此也就不需要考虑浏览器的兼容性问题。关于localstorage的介绍请参见(developer.mozilla.org/zh-CN/docs/…);

1. 进入页面，检查一下本地缓存的粉丝消息是否过期，如果过期，则清除。以粉丝为单位；
2. 点击某个粉丝，从服务器获取20条历史消息。获取该粉丝本地缓存消息，两者以最新时间对比，如果服务器是最新的，就清除该粉丝本地缓存，并且同步本地缓存。如果本地最新，则采用本地缓存。其考虑的主要目的是考虑到当前离下一次服务器同步很近，且用户又在其他电脑上与该粉丝聊过的场景，保证最快更新到本地缓存；
3. 主动发送和接收到的聊天消息，push到该粉丝对应的本地队列。（检查消息条数封装在内部实现）；
4. 客服关闭该粉丝，或刷新了本页面。当再次切换到该粉丝时，重复步骤 1 ；

评估：

locastorage的最大配额各浏览器基本是5MB。以下的计算都是估算，大致认为1KB=1000byte，1MB=1000KB。实际是以1024 换算。这里只估算。
如果需要缓存50个粉丝，那么每个粉丝分配的空间：5MB/50=0.1MB=100KB；
假设一个消息100字节（1个英文字符占1个字节，汉字属于双字节，占两个字节）。那么每个粉丝可以缓存消息数：100KB/100byte=100 * 1000/100=1000 条

定义配置参数：

1. fansLimit：50；缓存的粉丝个数
2. msgLimit：100；缓存的粉丝消息条数；
3. expired：1000 60 60 * 2；缓存有效时间，单位：ms；

缓存格式：

1. 在localStorage上定义个缓存变量：msgCache。里面存储的每个字段对应一个粉丝的缓存；
2. 以粉丝的id为key，{{fansid}}，值为对象。例如：{time:122222222,msgs:[{msg}]}
   1. fansid：粉丝的id；
   2. time：最新的活跃时间。每次添加缓存的时候同步更新.存毫秒值格式；
   3. msgs：缓存粉丝的具体业务数据数组，每一项代表一条消息，消息的格式参见业务消息object即可。

检查内容：

1. 粉丝消息过期检查（A），检查粉丝的最新活动时间是否超过设置的过期时长，超过则remove该粉丝缓存；
2. 粉丝消息条数检查(B)，检查改粉丝条数如果超过限制，删除最早的消息，直接用队列，先进先出;
3. 删除粉丝缓存（C）；直接删除粉丝缓存

缓存检测时机：

1. 页面加载时遍历粉丝缓存，执行A；
2. 读取localstorage的时候，执行A；
3. 设置粉丝消息缓存的时候，执行B；（这里可以不用执行A）
4. 设置缓存出现异常（quotaExceedError，表示超过localstorage最大限制），执行C；

总结

1. 关于缓存超出最大配额的处理比较粗糙，可以考虑设计一种动态扩容的方案；
2. 如果用户在聊天过程中更换了电脑，浏览器产品，还是会有消息丢失的情况；
3. 最根本的解决方案，还是由服务端实时保存聊天消息记录。