自己的回答

localStorage

  1. 浏览器本地存储, 大小为2.5-10m
  2. 不主动删除, 会一直存储
  3. 可以跨tab页面获取
  4. 存储string

sessionStorage

  1. 浏览器本地存储, 大小为2.5-10m
  2. 页面关闭就会删除
  3. 不能跨tab页面获取
  4. 存储string

indexDB

  1. 运行大容量存储, 提供查询接口, 能建立索引, 接近NoSql数据库
  2. 键值对存储, 异步操作, 支持事务, 同源限制, 存储空间>250m, 支持二进制存储

参考回答

WebStorage又可以分为localStorege和sessionStorage

localStorage

和Cookie异同：相同的一点是：针对一个域名，即在同一个域名下，会存储相同的一段localStorage
区别：

  • 1.容量：localStorage的容量上限为5M，相对于Cookie的4K大大增加。当然这个5M是针对一个域名的，因此对于一个域名是持久存储的
  • 2.只存在客户端，默认不参与和服务端的通信。这样很好地避免了Cookie带来地性能问题和安全问题
  • 3.接口封装。通过localStorage暴露在全局，并通过它的setItem和getItem等方法进行操作，非常方便。

看看如何具体操作localStorage？

  1. let obj={name:"zhufeng",age:10};
  2. localStorage.setItem("name","zhufeng");
  3. localstorage.setItem("message",JSON.stringify(obj));
  4. //接着进入相同的域名时就能拿到相应的值：
  5. let name=localStorage.getItem("name");
  6. let info=JSON.parse(localStorage.getItem("info"))

在这里能得到，localStorage其实存储的都是字符串，如果是存储对象需要调用JSON的stringify方法，并且用JSON.parse来解析成对象 应用场景：利用localStorage的较大容量和持久特性，可以利用localStorage存储一些内容稳定的资源，比如官网的logo，存储Base64格式的图片资源，因此要好好利用localStorage

sessionStorage

特点：sessionStorage和localStorage是一致的

  • 1.容量。容量上限为5M
  • 2.只存在客户端，默认不参与和服务端的通信
  • 3.接口封装。除了sessionStorage名字有所变化，存储方式、操作方式均和localStorage一样

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

应用场景：1.可以用它对表单信息进行维护，将表单信息存储存储在里面，可以保证页面即使刷新也不会让之前的表单信息丢失。2.可以用它存储本次浏览记录。如果关闭页面后不需要这些记录，用sessionStorage就再合适不过了。事实上微博采取这样的存储方式。