localStorage 和 sessionStorage

浏览器的储存机制 — storage

  • localStorage 和 sessionStorage

方法localStoragesessionStoragecookie
生命周期永久会话下有效, 关闭页面或浏览器后被清除设置有效期之前有效
大小5M 左右5M 左右4K 且一般为 20 个
于服务器通信不参与服务器通信不参与服务器通信每次请求放在请求头中
作用域同文档源共用
文档源通过协议、主机名以及端口确定
也是文档源级别
只有当前标签页可用
同源可用–协议/域名/端口
  • localStorage 和 sessionStorage
  • 属性
    • length
      所储存信息的条数
  • 方法
    • setItem(key:String, val:Any)
      储存一条数据, key 和 val 都必须是字符串,如果不是则会被转成字符串
    • getItem(key:String)
      获取一条数据, 如果 key 不存在则返回 null
    • removeItem(key:String)
      删除一条数据, 如果 key 不存在该方法不做任何事情
    • clear()
      清除所有储存的数据, 返回 undefined
    • key(index:Number)
      返回指定下标的数据, 配合 length 属性可以循环出所有的数据
  • 监听事件
    • window.addEventListener(‘storage’, onStorageChange);

      Storage 接口储存的数据发生变化时,会触发 storage 事件,可以指定这个事件的监听函数。 这个事件接收一个 event 实例对象作为参数

    • Event
      • key
        字符串,表示发生变动的键名。如果 storage 事件是由 clear()方法引起,该属性返回 null。
      • newValue
        字符串,表示新的键值。如果 storage 事件是由 clear()方法或删除该键值对引发的,该属性返回 null
      • oldValue
        字符串,表示旧的键值。如果该键值对是新增的,该属性返回 null
      • storageArea
        对象,返回键值对所在的整个对象。也说是说,可以从这个属性上面拿到当前域名储存的所有键值对。
      • url
        字符串,表示原始触发 storage 事件的那个网页的网址

注意,该事件有一个很特别的地方,就是它不在导致数据变化的当前页面触发,而是在同一个域名的其他窗口触发。也就是说,如果浏览器只打开一个窗口,可能观察不到这个事件。比如同时打开多个窗口,当其中的一个窗口导致储存的数据发生改变时,只有在其他窗口才能观察到监听函数的执行。可以通过这种机制,实现多个窗口之间的通信

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值