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

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