JavaScript中的cookie

1.我们为什么要用cookie?
HTTP最大的特点是无连接无状态,使用Cookie和Session的技术就是为了解决这个问题

2.什么是cookie
cookie是当你浏览某个网站的时候,由web服务器存储在你的机器硬盘上的一个小的文本文件。它其中记录了你的用户名、密码、浏览的网页、停留的时间等等信息。当你再次来到这个网站时,web服务器会先看看有没有它上次留下来的cookie。
如果有的话,会读取cookie中的内容,来判断使用者,并送出相应的网页内容,比如在页面显示欢迎你的标语,或者让你不用输入ID、密码就直接登录等等。

3.cookie中都有什么
属性有:

  • 键值对
  • expires 过期时间
  • path 路径
  • domain 跨域
  • secure 安全性
    encodeURIComponent 编码
    decodeURIComponent 解码

4.cookie的增删改查
添加,直接添加数据:
document.cookie = "key=value;"
删除,通过设置过期时间来让它自动删除:
document.cookie = "key=value;expires="+new Date()
修改,重新设置:
document.cookie = "key=hello;"
查询:
console.log(document.cookie.split(";")[0].split("=")[1])

4.cookie的特性

  • 域的限制
  • 时间限制
  • 空间限制,cookie只能存储4kb
  • 数量限制,每个域下最多不能超过50个cookie
  • 存储数据类型限制,cookie只能存储字符串

5.cookie与localStorage的区别

  • 存储大小
    cookie:一般不超过4k
    sessionStorage:5M甚至更多
    localStorage:5M甚至更多

  • 数据有效期
    cookie:一般由服务器生成,可以设置失效时间;若没有设置时间,关闭浏览器cookie失效,如果设置了时间,cookie就会存储在硬盘中,过期失效
    sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器会被清除
    localStorage:永久有效,窗口或者浏览器关闭也会一直保存,除非手动永久删除

  • 作用域
    cookie:在所有同源窗口中都是共享的
    sessionStorage:在同一个浏览器窗口是共享的(不同浏览器,即使是统一页面也不共享)
    localStorage:在所有同源窗口中共享

  • 通信
    cookie:cookie在浏览器和服务器之间来回传递,如果使用cookie保存过多数据会造成性能问题
    sessionStorage:仅在客户端(浏览器)中保存,不参与服务器的通信
    localStorage:仅在客户端(浏览器)中保存,不参与服务器的通信

  • 应用场景
    cookie:判断用户是否登录过网站,以便实现下次自动登录或记住密码;保存事件信息
    sessionStorage:敏感账号一次性登录,单页面用的较多
    localStorage:用于长期登录,适于长期保存在本地的数据

6.localStorage的方法

  • getItem(key) 获取元素
  • setItem(key,value) 设置元素
  • removeItem(key) 移除元素

posted on 2022-08-11 21:47  小生南骆  阅读(113)  评论(0编辑  收藏  举报

导航