2021-07-16 浏览器本地存储以及各自的优劣

最新推荐文章于 2023-09-12 00:03:17 发布

-Whonow�

最新推荐文章于 2023-09-12 00:03:17 发布

阅读量273

点赞数

分类专栏：前端 JavaScript 文章标签： javascript chrome http 安全网络安全

原文链接：https://juejin.cn/post/6844904021308735502

版权

8 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

浏览器的本地存储以及各自的优劣

浏览器的本地存储主要分为Cookie、WebStorage (包括 localStorage 和 sessionStorage)、和IndexDB。

Cookie 最开始被设计出来其实并不是来做本地存储的，而是为了弥补HTTP在状态管理上的不足。HTTP协议是一个无状态协议，客户端向服务器发送请求，服务器返回响应，就结束了，但是下次发送请求如何让服务器知道客户端是谁呢？？这个时候就要用到cookie了。

Cookie 本质上就是浏览器里面存储的一个很小的文本文件，内部以键值对的方式来存储。向同一个域名下发送请求，都会携带相同的 Cookie，服务器拿到 Cookie 进行解析，便能拿到客户端的状态。

缺陷：

容量缺陷。Cookie体积只有4KB，只能用来存储少量信息。
性能缺陷。Cookie紧跟域名，不管域名下面的某一个地址是否需要这个Cookie，请求都会携带上完整的Cookie，这样随着请求的增多，会造成巨大的性能浪费，因为请求携带的很多不必要的信息。
安全缺陷。由于Cookie是以纯文本的形式在浏览器和服务器中传递，很容易被非法用户拦截，进行一系列的篡改。在Cookie的有效期内重新发送给服务端，这是相当危险的。另外，在HttpOnly为false时，Cookie信息能够直接通过JS脚本来获取。

localStorage和Cookie一样，就是针对一个域名，即在同一个域名下，会存储相同的一段localStorage。
不过它相比于Cookie有很多区别：

接下来我们来具体看看如何来操作localStorage

let obj = { name: "sanyuan", age: 18 };
localStorage.setItem("name", "sanyuan"); 
localStorage.setItem("info", JSON.stringify(obj));

接着进入相同的域名时就能拿到相应的值:

let name = localStorage.getItem("name");
let info = JSON.parse(localStorage.getItem("info"));

从这里可以看出，localStorage其实存储的都是字符串，如果是存储对象需要调用JSON的stringify方法，并且用JSON.parse来解析成对象。

利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，比如官网的logo，存储Base64格式的图片资源，因此利用localStorage

sessionStorage和localStorage有一个本质的区别，那就是前者只是会话级别的存储，并不是持久化存储。会话结束，也就是页面关闭，这部分sessionStorage就不复存在了。

1.可以用它对表单信息进行维护，将表单信息存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。

2.可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博就采取了这样的存储方式。

IndexedDB是运行在浏览器中的非关系型数据库, 本质上是数据库，绝不是和刚才WebStorage的 5M 一个量级，理论上这个容量是没有上限的。

接着我们来分析一下IndexedDB的一些重要特性，除了拥有数据库本身的特性，比如支持事务，存储二进制数据，还有这样一些特性需要格外注意：

1.键值对存储。内部采用对象仓库存放数据，在这个对象仓库中数据采用键值对的方式来存储。
2.异步操作。数据库的读写属于 I/O 操作, 浏览器中对异步 I/O 提供了支持。
3.受同源策略限制，即无法访问跨域的数据库。

关注

专栏目录