对于浏览器本地存储的理解

此片文章仅对于浏览器的本地存储理解--Cookie localStorage sessionStorage websql indexDB

cookie

由浏览器生成，前端也可以设置，保存在本地的一个文件，通过response响应头的set-cookie字段进行设置，且Cookie的内容自动在请求的时候被传递给服务器。一般记录用户的ID,密码，浏览过的网页，停留的时间，再次来到这个网站时，网站通过读取cookies得知相关信息

优点：

人性化的体验，如记住密码，老用户登录欢迎语

弥补了HTTP无连接的特性

站点统计访问人数的一个依据

缺点：

在一个网站上的cookie只能对一个人使用，无法解决多人共用一台电脑的问题，带来不安全的因素

cookie文件容易被误删除

一个人可以使用多台电脑

Cookies欺骗。修改host文件，可以非法访问目标站点的Cookie

容量上限4kb

在请求头上带着数据安全性差

使用：

document.cookie.match(/[^ =;]+(?==)/g)---当前域名的cookie

清除当前域名的cookie

 

function delCookie () {
  var keys = document.cookie.match(/[^ =;]+(?==)/g)
  if (keys) {
    for (var i = keys.length; i--;) {
      document.cookie = keys[i] + '=0;path=/;expires=' + new Date(0).toUTCString() // 清除当前域名下的,例如：m.ratingdog.cn
      document.cookie = keys[i] + '=0;path=/;domain=' + document.domain + ';expires=' + new Date(0).toUTCString() // 清除当前域名下的，例如 .m.ratingdog.cn
      document.cookie = keys[i] + '=0;path=/;domain=ratingdog.cn;expires=' + new Date(0).toUTCString() // 清除一级域名下的或指定的，例如 .ratingdog.cn
    }
  }
}

localStorage

可以长期存储数据，没有时间限制，除非自己设置，可以保存超长时间，一般浏览器支持的是5M大小，不同浏览器大小会有所不同

优点：

拓展了cookie的4k限制

可以将第一次请求的5M大小数据直接存储到本地，相比于cookie可以节约带宽

遵循同源策略，不同的网站直接是不能共用相同的localStorage

缺点：

需要手动删除，否则一直都在

浏览器大小不一，版本支持也不一样

只支持string类型的存储，json对象需要进行转换

本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，导致页面变卡

清除当前域名下的缓存-- window.localStorage.clear();

sessionStorage

会话存储，只有在浏览器被关闭之前使用，在同一个浏览器多页面切换时可以使用，但是关闭浏览器之后数据就会消失，此处关闭浏览器是指整个浏览器关闭而不是单页面关闭

清除当前域名下的缓存--window.sessionStorage.clear();

websql

Web SQL 是在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写。它使用 SQL 来操纵客户端数据库的 API，这些 API 是异步的，规范中使用的方言是SQLlite。数据库还是在服务端，不建议使用，已废弃

indexDB

因为现有的浏览器数据存储方案不适合存储大量数据，Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

IndexedDB 就是浏览器提供的本地数据库，允许储存大量数据，提供查找接口，还能建立索引。不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

 

对于sessionStorage和localStorage的数据转化---未完待续

 

引用文章：

浏览器缓存原理以及本地存储