我目前了解到的本地存储的方式有以下四种:
1.localStorage
2.sessionStorage
3.cookie
4.indexedDB
注:因为indexedDB本身是一个数据库,操作复杂有一定难度,本人只是了解过一丝丝皮毛,但没有深入研究,在此就不做详细讨论了
接下来从以下几个方面说下它们的区别:
(1)存储数据的大小不同
localStorage和sessionStorage大概可以存5M左右的数据,不同的浏览器能存储的大小也不一样;
cookie能存的比较少,大概是4KB;
indexedDB能存储的数据是最多,理论上是没有上线的;
注:以上数据都是我查资料得来的,具体多少没有试过
(2)存储数据的类型不同
localStorage和sessionStorage是只能存入字符串，不能直接存对象;
cookie是键值对存储
indexedDB是存储大量结构化数据(包括, 文件/ blobs)
(3)存储数据的位置不同
localStorage是存在硬盘里面的;
sessionStorage是存在内存里的;
cookie是储存在用户本地终端上的;
indexedDB也是客户端存储
(4)存储数据的生命周期不同
localStorage是持久化的本地存储,关闭页面再打开数据依然还在,不会被主动清除,除非自己手动清除数据;
sessionStorage就不同了,它是关闭页面或者说是关闭会话,数据就会被清除;
cookie可以通过Expires属性设置一个过期时间,到时间就会被浏览器清除,在过期时间之前,即使是浏览器关闭,数据也一直有效
(5)数据和服务器之间的交互方式不同
在请求时，同源的cookie信息会自动作为请求头的一部分发给服务器,如果过多设置cookie，会额外增加通信负荷;
localStorage和sessionStorage就不会,因为仅仅只在本地保存,不会自动把数据放给服务器
在实际开发中，我会根据具体情况来选择使用它们。如果不需要与服务器通信并且可以长时间保存在客户端的信息就可以采用localstorage来保存，比如说：网站中提供的个人设置信息等;像敏感账号的一次性登录,我会用sessionStorage;如果需要标记用户和跟踪用户行为的情况,就比较推荐用cookie;最后像大量数据的存储、在线文档的保存编辑历史情况，用indexedDB比较合适