Javascript本地存储的⽅式有哪些？区别及应用场景

最新推荐文章于 2024-11-02 18:00:00 发布

原创最新推荐文章于 2024-11-02 18:00:00 发布 · 948 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

本文详细介绍了JavaScript本地存储的四种方法：cookie、sessionStorage、localStorage和indexedDB，比较它们的存储大小、有效期、交互方式与应用场景，助您理解并选择合适的本地缓存策略。

javaScript 本地存储（也称本地缓存）的⽅法我们主要讲述以下四种：

cookie

sessionStorage

localStorage

indexedDB

cookie

Cookie ，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。

是为了解决 HTTP 无状态导致的问题

作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于

控制 cookie 有效期、安全性、使用范围的可选属性组成

localStorage

HTML5 新方法，IE8及以上浏览器都兼容

特点

生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

存储的信息在同一域中是共享的

当本页操作（新增、修改、删除）了 localStorage 的时候，本页面不会触发 storage 事件,但是别的页面会触发 storage 事件。

大小：5M（跟浏览器厂商有关系）

localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

受同源策略的限制

sessionStorage

sessionStorage 和 localStorage 使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，

sessionStorage 将会删除数据

扩展的前端存储方式

indexedDB 是⼀种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实

现对该数据的高性能搜索

优点：

储存量理论上没有上限

所有操作都是异步的，相⽐ LocalStorage 同步操作性能更⾼，尤其是数据量较⼤时

原⽣⽀持储存 JS 的对象

是个正经的数据库，意味着数据库能⼲的事它都能⼲

缺点：

操作⾮常繁琐

本身有⼀定门槛

关于 cookie 、 sessionStorage 、 localStorage 三者的区别主要如下：

存储⼤⼩： cookie 数据⼤⼩不能超过 4k ， sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤

有效时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据； sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除； cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

数据与服务器之间的交互⽅式， cookie 的数据会⾃动的传递到服务器，服务器端也可以写 cookie 到客户端；

sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存

应⽤场景

标记⽤户与跟踪⽤户⾏为的情况，推荐使⽤ cookie

适合⻓期保存在本地的数据（令牌），推荐使⽤ localStorage

敏感账号⼀次性登录，推荐使⽤ sessionStorage

存储⼤量数据的情况、在线⽂档（富⽂本编辑器）保存编辑历史的情况，推荐使⽤ indexedDB