Fork me on GitHub

常见的浏览器存储方式

发表于 | 分类于 |
字数统计: 1.1k | 阅读时长 ≈ 4 min

前言

在很久很久以前，由于HTTP 协议是一个无状态协议，服务器是无法记录浏览器的状态的。如果每次都要在通过表单提交信息给服务器，或者通过向服务器请求某些固定的数据，这无疑是十分繁琐的事情，因此如何进行状态管理就是急需解决的一个问题。因此cookie就这样诞生啦，在此后的许多年，浏览器发展迅速，出现了更多的存储方式，他们各有优缺点，接下来让我们详细了解下吧！

Cookie最初是用于存储会话信息的，它会自动随着HTTP请求头信息一起发送，因此服务器就可以获取到cookie中的数据。

Cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。

Cookie的优点

  1. Cookie相比于其他的数据存储方式，兼容性更好。
  2. Cookie可以设置过期时间，默认是会话结束时到期自动销毁。cookie的有效时间默认为-1，如果不进行设置的话，就会默认在浏览器会话关闭时结束。

Cookie的缺点

  1. Cookie能存储的数据容量有限，最大只能有 4KB，因此Cookie只能用来存少量信息。
  2. Cookie会被放到统一域名下的所有请求的请求头中，而有些请求并不需要cookie中的数据，因此会增加一部分不必要的网络开销。
  3. Cookie一般只能存储字符串，存储的格式有限。
  4. 由于Cookie中的键值对是经过URL编码的，所以读取Cookie需要解码，使用不太方便。
  5. Cookie是使用HTTP连接传递数据，所以 cookie 存储的信息容易被窃取，安全性不高。

Cookie的用法

读取

1
2
3
4
5
6
7
8
9
10
function getCookie(name){
  var start = document.cookie.indexOf(name+"=") ;
  if ( start != -1 ){
      start = start + name.length + 1 ;
      var end = document.cookie.indexOf(";", start) ;
      if ( end == -1 ) end = document.cookie.length ;
      return unescape(document.cookie.substring(start,end)) ;
  }
  return null;
}

写入

1
2
3
4
5
6
function setCookie(name, value){
  var expdate = new Date();
  //设置过期时间
  expdate.setTime(expdate.getTime() + 60 * 60  * 1000);//1 hour
  document.cookie = name + "=" + escape(value) + ";expires=" + expdate.toUTCString();
}

删除

1
2
3
4
function delCookie(name){
  let newVue = new Vue();
  newVue.setCookie( name, null, -1) ;
}

localStorage

localStorage是HTML5中新增的浏览器存储机制，它可以作为持久保存客户端数据的方案，除非主动删除localStorage中的数据，否则数据是永远不会过期的。(localStorage受同源策略的限制)

localStorage的优点

  1. localStorage的存储量大。
  2. localStorage也是以键值对的方式存储字符串，相对于cookie，它可存的数据格式更多。
  3. localStorage不会与服务端发生通信，仅位于浏览器端。

localStorage的缺点

  1. 如果要存储JSON格式的数据，存储和获取的时候需要进行JSON和字符串之间的转换，因此它还是更适合存储数据结构较为简单的数据。
  2. localStorage中的数据没有过期时间设置，不能自动删除，如果存储内容多的话会消耗内存空间。

localStorage的用法

读取

1
2
3
localStorage.getItem(key)
//或者
localStorage[key]

写入

1
localStorage.setItem(key,value);

删除

1
2
3
localStorage.removeItem(key)
//或者清除所有的数据
localStorage.clear()

sessionStorage

sessionStorage和localStroage差不多，也是本地存储。但sessionStorage的生命周期和localStroage不同，它是会话级别的本地存储，当会话结束时存储内容就会被销毁。

Local Storage、Session Storage 和 Cookie 都遵循同源策略。但 Session Storage 特别的一点在于，即便是相同域名下的两个页面，只要它们不在同一个浏览器窗口中打开，那么它们的 Session Storage 内容便无法共享。

sessionStorage的用法

读取

1
sessionStorage.getItem(key)

写入

1
sessionStorage.setItem(key,value);

删除

1
2
3
sessionStorage.removeItem(key)
//或者清除所有的数据
sessionStorage.clear()

IndexedDB

以上三种都只适用于少量数据，如果要存储更多更复杂的数据就不适用了。因此我们需要新的存储方式，比如IndexedDB。

IndexedDB 是一个运行在浏览器上的非关系型数据库。

IndexedDB与 Web storage 一致，均是在创建数据库的域名下才能访问。且不能指定访问域名。IndexedDB存储时间永久，除非用户清除数据，可以用作长效的存储。

-------------完结撒花 -------------