阅读 62

浏览器本地存储

浏览器的本地存储

  • 浏览器的本地储存主要分为Cookie、WebStorage和IndexedDB,其中WebStorage又可以分为localStorage和sessionStorage

Cookie(html5 之前用于存储 )

  • 本身用于浏览器和server通讯
  • 可用document.cookie = '...'来修改
  • Cookie 最开始被设计出来其实并不是来做本地存储的,而是为了弥补HTTP在状态管理上的不足
  • HTTP协议是一个无状态协议,客户端向服务端发请求,服务端返回响应。
  • Cookie本质上就是浏览器里面存储的一个很小文本文件,内部以键值对的方式来存储(在chrome开发者面板的Application这一栏可以看到),服务器拿到Cookie进行解析,便能拿到客户端的状态
  • Cookie的作用,就是用来做状态存储,但它也是有诸多致命的缺陷的:
    1. 容量缺陷。Cookie的体积上限只有4KB,只能用来储存少量的信息
    2. 性能缺陷。Cookie紧跟域名,不管域名下面的某一个地址需不需要这个Cookie,请求都会携带上完整的Cookie,这样随着请求数的增多,会造成巨大的性能浪费的,因为请求携带了很多不必要的内容
    3. 安全缺陷。由于Cookie以纯文本的形式在浏览器和服务器中传递,很容易被非法用户截获,然后进行一系列的篡改,在Cookie的有效期内重新发送给服务器,这是相当危险,另外,在HttpOnly为false的情况下,Cookie信息能直接通过JS脚本来读取
    4. 只能用document.cookie = '...'来修改

loacalStorage

和Cookie异同
  • localStorage 有一点跟Cookie一样,就是针对一个域名,即在同一个域名下,会储存相同的一段localStorage。
  • 不过它相对Cookie还是有相当多的区别
    1. 容量。localStorage的容量上限为5M,相比于Cookie的4K大大增加,当然这个5M是针对一个域名,因此对于一个域名是持久存储的
    2. 只存储在客户端,默认不参与于服务器的通信。这样子就很好地避免来Cookie带来的性能问题和安全问题
    3. 借口封装。通过localStorage暴露在全局,并通过它的setItem和getItem等方法进行操作,非常方便。
操作方式
  • 如何操作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的较大容量和持久特性,可以利用loaclStorage存储一些内容稳定的资源,比如官网的logo,存储Base64格式的图片资源,因此利用localStorage

sessionStorage

特点
  • sessionStorage以下方面和localStorage一致:
    1. 容量。容量上限也为5M
    2. 只存在客户端,默认不参与于服务端的通信
    3. 接口封装,除了sessionStorage名字有所变化,存储方式、操作方式均和loacStorage一样
  • 但sessionStorage和localStorage有一个本质的区别,那就是前者只是会话级别的存储,并不是持久化存储。会话结束,也就是页面关闭,这部分sessionStorage就不复存在了。
应用场景
  1. 可以用它对表单信息进行维护,将表单信息存储在里面,可以保证页面,即使刷新也不会让之前的表单信息丢失
  2. 可以用它存储本次浏览记录,如果关闭页面后不需要这些记录,用sessionStorage,比如微博

IndexedDB

  • IndexDB是运行在浏览器中的非关系数据库,本质上是数据库,理论上这个容量是没有上限的。
  • IndexDB的一些重要特性,除了拥有数据库本身的特性,比如支持事务,存储二进制数据,
    1. 键值对存储。内部采用对象仓库存储数据,在这个对象仓库中数据采用键值对的方式来存储
    2. 异步操作。数据库的读写操作属于I/O操作,浏览器中对异步I/O提供了支持。
    3. 受同源策略限制,即无法访问跨域的数据库

总结

  • cookie并不适合存储,而且存在非常多的缺陷
  • Web Storage包括localStorage和sessionStorage,默认不会参与和服务器的通信
  • IndexedDB为运行在浏览器的非关系型数据库,为大型数据的存储提供了接口
  • loaclStorage数据会永久存储,除非代码或者手动删除
文章分类
前端
文章标签