浏览器的本地存储

浏览器的本地存储

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

一、Cookie

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

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

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

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

缺陷:

  1. 容量缺陷。Cookie的体积上限只有4KB,只能用来存储少量的信息。
  2. 性能缺陷。Cookie是紧跟域名的,不管域名下面的某个地址需不需要这个Cookie,它都会携带上完整的Cookie。这样随着请求数据的增多,很容易造成性能上的浪费。
  3. 安全缺陷。由于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、受同源策略限制,即无法访问跨域的数据库。


四、总结

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

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

上一篇:part1 软件测试基础知识面试题(含答案)


下一篇:JSON+AJAX+Jquery+XML+cookie+webStorage基础