浏览器的存储方式

1.1cookie

(1)什么是cookie

Cookie是存储在用户浏览器中的一段不超过4KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。参见文章https://blog.csdn.net/fageaaa/article/details/145313001的3.3部分。

(2)cookie的特点

• 4KB 限制
  存储大小4KB,只能用来存储少量的信息。
• 自动发送
  会自动把cookie带入到请求头传递给服务器;服务器也可以传cookie给客户端。
• 域名独立
  cookie是紧跟域名的,不管域名下面的某个地址需不需要这个cookie,它都会携带上完整的cookie。这样随着请求数据的增多,很容易造成性能上的浪费
• 过期时限
  存储时间由设定时间而定
• 安全缺陷
  由于cookie以纯文本的形式在浏览器和服务器中传递,很容易被非法用户截获,然后进行一系列的篡改，并在cookie的有效期内重新发送给服务器。另外,在HTTPOnly为false的情况下,cookie信息能直接通过JS脚本读取。

(3)代码示例(cookie是字符串)

示例1:

// 设置cookie
    function setCookie(name, value, time){
      if(time){
        let d = new Date()
        d.setDate(d.getDate()+time)
        d = d.toUTCString()
        document.cookie = `${name}=${value};expires=${d}`
      }else{
        document.cookie = `${name}=${value}`
      }
    }

    // 读取cookie
    function getCookie(name){
      let obj = {}
      let arr = document.cookie.split('; ')
      // 遍历数组
      arr.forEach(item=>{
        let newArr = item.split('=')
        obj[newArr[0]] = newArr[1]
      })
      return obj[name]
    }

    // 删除cookie
    function delCookie(name){
      setCookie(name, '', -1)
    }
    setCookie("username", "admin", 20);

如上,执行上述页面代码后。如浏览器控制面板中的应用部分查看,会发现cookie生效。示例2:

document.cookie = "username=ziming; expires=Thu, 16 Dec 2015 12:00:00 GMT; path=/"// 设置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 删除cookie

1.2Web storage API(localStorage和sessionStorage)

Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。

(1)localStorage

存储大小5M左右；
存储时间:永久有效
只能存储字符串类型(和cookie一样)；
不支持跨域访问(和cookie一样)；

(2)sessionStorage

存储大小5M左右；
存储时间:在该窗口关闭之前有效；
只能存储字符串类型(和cookie一样)；
不支持跨域访问(和cookie一样)；

ps:如果是存储对象,那么在存储时就需要调用JSON的stringify方法,并且在取值时用JSON.parse来解析成对象。

‌ps:同一网站的不同标签页属于同一域名‌。在浏览器中,同一网站的不同标签页属于同一个域名,因为它们共享相同的协议、域名和端口号。这意味着它们在浏览器中被视为同一个站点,具有相同的域名‌。

(3)storage的用法

Storage.setItem(name,key) ：设置值
Storage.getItem(name)：获取
Storage.removeItem(name)：删除
Storage.clear()：删除所有值
Storage.key()：获取键值

1.3indexedDB

是个正经的数据库(indexedDB是非关系型数据库),数据库能做的它都能做。后续我可以讲讲它具体的使用过程。

(1)特点

存储大小:理论上没有上限。250M以上。

(2)应用场景

存储大量数据的时候,如在线文档(富文本编辑器)保存编辑历史的情况。后续有空可以具体实现一下此类功能。

1.4websql

已经被w3c废弃,不用做过多了解。