# **Javascript**本地存储的⽅式,区别及应⽤场景

114 阅读1分钟

javaScript 本地存储(也称本地缓存)的⽅法我们主要讲述以下四种:

cookie sessionStorage localStorage indexedDB

cookies: 浏览器缓存

    在HTML5标准前本地存储的主要方式。
​
    cookie由名称(一个唯一确定cookie的名称)、值(储存在cookie中的字符串值)、域(cookie对于哪个域是有效的)、路径(指定域中的指定路径)、失效时间(cookie何时应该被删除的事件)和安全指标(指定后,cookie只有在使用SSL连接时才发送到服务器)构成。
​
    优点:兼容性好,请求头自带cookie方便。
​
    缺点: 保存在客户端,存储量小受到限制,所有cookie的累加长度限制在4KB,超长会被忽略;自动请求头加入cookie浪费流量,每个domain(层)限制20个cookie,使用起来麻烦,需要自行封装; 
​
    设置过期时间自动删除,前后端自动同步。

localStorage: 本地存储

    HTML5加入的以键值对(Key:Value)为标准的方式。
​
    优点: 操作方便,存储的数据没有过期时间(永久性存储,除非手动删除),大小为5M,兼容IE8+。

sessionStorage: 临时存储

    和localStorage基本类似,存储的数据会在浏览器会话结束时被清除(即页面/浏览器关闭时)。⽽且与 cookie、localStorage 不同,他不能在所有同源窗⼝中共享,是会话级别的储存⽅式;

IndexedDB: 数据库存储

    是被正式纳⼊HTML5 标准的数据库储存⽅案,它是 NoSQL数据库,⽤键值对进⾏储存,可以进⾏快速读取操作,⾮常适合 web场景,同时⽤JavaScript 进⾏操作会⾮常便。