浏览器的本地存储(2)的WebStorage了解多少

WebStorage又可以分为localStorege和sessionStorage

localStorage

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

区别：

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

看看如何具体操作 localstorage ？

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

 

在这里能得到 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 就再合适不过了。事实上微博采取这样的存储方式。

posted on 2021-12-20 15:15  bala001  阅读(273)  评论(0)  编辑  收藏  举报

导航