浏览器的存储方式

原创已于 2025-03-24 17:57:20 修改 · 置顶 · 1.1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html5 #本地存储

于 2025-02-15 00:43:20 首次发布

前端同时被 2 个专栏收录

333 篇文章

订阅专栏

HTML5

10 篇文章

订阅专栏

浏览器的存储方式

1.1cookie
1.2Web storage API(localStorage和sessionStorage)
1.3indexedDB
- (1)特点
- (2)应用场景
1.4websql

1.1cookie

(1)什么是cookie

Cookie是存储在用户浏览器中的一段不超过4KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用于控制 Cookie 有效期、安全性、使用范围的可选属性组成。参见文章https://blog.youkuaiyun.com/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