首先是没有差异。

因为没有关系。

这里的深度指的是属性层级:{ a: { b: { c: { d: } } } }就是4层。主要是想针对扁平化进行对比。

场景:

存储草稿:A、B和C,是用三个Key作为三项数据扁平化放入local storage还是把三个集中存到一个叫draft的对象里作为一项数据进行保存。

这两种场景自然会想到是不是有性能问题。

结论是没有,或者说影响甚微。见下面的实验结果

测试用例:

对不同层级的对象进行存储,分别存储10w次,统计时间差。


测试代码截图

测试结果

部分结果截图

结论

注意:LocalStorage存储对象数据,依旧是以字符串类型存储的。存储的快慢和存储内容的长度是直接相关的,也就是说,除非对象属性的深度能直接反映到JSON化后的字符串内容长度上,才会对存储性能造成影响。

所以,抛开性能之后,扁平化的数据和非扁平化的方式到底使用哪种,最主要的区别在管理上。

回到刚才的例子,在你的应用中,如果ABC三个草稿,通常只会使用其中一个草稿,而不是对三个草稿进行组合管理,那么扁平化是有优势的,因为单项数据小。

相关

LocalStorage是不存在锁机制的,也就是说,两个窗口打开同一个站点,对同一个key的值进行修改,是相关影响的,但是本身这个操作是原子操作。

对key的长度也没有特定限制,但是每一项不得超过5M(也取决于不同浏览器的特定实现)
Each Storage object provides access to a list of key/value pairs, which are sometimes called items. Keys are strings. Any string (including the empty string) is a valid key. Values are similarly strings.

标准文档 Web storage