浏览器的本地存储

2024-02-04 21:42:40

浏览器的本地存储

一、Cookie
二、WebStorage
- 1、localStorage
- 2、sessionStorage
三、IndexedDB
四、总结

浏览器的本地存储主要分为Cookie、WebStorage和IndexedDB，其中WebStorage又分为localStorage（本地存储）和sessionStorage（会话存储）。

一、Cookie

Cookie最开始并不是用于本地存储的，而是为了弥补HTTP在状态管理上的不足：

HTTP是一个无状态的协议，客户端向服务器发送请求，服务器返回响应，但是下一次发送请求时服务端就无法识别客户端的身份信息，故而产生了Cookie。

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

也就是说，Cookie的作用就是用来做状态存储的。

缺陷：

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

二、WebStorage

WebStorage是HTML新增的本地存储解决方案之一,WebStorage提供两种类型的API：localStorage和sessionStorage，两者的区别看名字就有大概了解，localStorage在本地永久性存储数据，除非显式将其删除或清空，sessionStorage存储的数据只在会话期间有效，关闭浏览器则自动删除。

1、localStorage

localStorage的存储都是字符串，如果是存储对象，那么在存储时就需要调用JSON的stringify方法，并且在取值时用JSON.parse来解析成对象。

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
JSON.parse() 方法将数据转换为 JavaScript 对象。

localStorage的操作方式：

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

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

与Cookie的异同：

同：针对一个域名，即在同一域名下，会存储同一段localStorage。
异：
1、容量。localStorage的容量上线为5MB。
2、只存储在客户端，默认不参与与服务器端的通讯，这样就很好的避免了Cookie带来的性能和安全问题。
3、接口封装。通过localStorage暴露在全局，并通过它的setItem和getItem等方法进行操作。

应用场景：

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

2、sessionStorage

与localStorage的异同：

同：
1、容量。sessionStorage的容量上线也为5MB。
2、只存储在客户端，默认不参与与服务器端的通讯。
3、接口封装。除了名字变化，sessionStorage的存储方式和操作方式均和localStorage一样。
异：
sessionStorage将数据保存在Session对象中。而localStorage将数据保存在客户端本地的硬件设备，即使浏览器被关闭了该数据依然存在，下次打开浏览器访问网站时可以继续使用。

应用场景：

1、可以使用sessionStorage对表单进行维护，将表单信息存储在里面，即使刷新表单也能保证不会让之前的表单信息丢失。
2、可以使用sessionStorage来存储本次浏览记录，即那种关闭页面就不需要的浏览记录。

三、IndexedDB

IndexedDB是运行在浏览器中的非关系型数据库，理论上这个容量是没有上限的。

IndexedDB的特性：

除了一些数据库本身的特性，例如支持事务、存储二进制数据等，还有：

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

四、总结

cookie并不适合存储，而且存在特别多的缺陷。
WebStorage又分为localStorage（本地存储）和sessionStorage（会话存储），默认不会参与和服务器的通信。它们的存储都是以字符串形式进行存储的，对于复杂的对象可以使用JSON对象的stringify和parse来处理。
IndexedDB是运行在浏览器上的非关系型数据库，为大型数据的存储提供了接口。

虽然WebStorage更适合做本地存储，但这并不意味着WebStorage可以取代cookie，而是有了WebStorage后cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。所以仅仅作为本地存储解决方案WebStorage是优于cookie的。

码农公寓