本地存储

Frank
  • 基础知识
  • Cookie
  • localStorage
  • sessionStorage
大约 4 分钟约 1183 字...

// TODO:重整

  • 浏览器存储数据的一种方式
  • 因为存储在用户本地,而不是存储在服务器上,是本地存储
  • 一般会自动随着浏览器每次请求发送到服务器端

作用:利用cookie跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在每个网页的停留时间等

  1. 写入cookie: 不能一起设置,只能一个一个设置
document.cookie = 'username=zs'
document.cookie = 'age=18'
  1. 读取cookie:读取的是一个由名值对构成的字符串,每个名值对之间由“;"”(一个分号和一个空格)隔开
document.cookie //username=zs; age=18
  1. cookie的名称Name和值Value
  • 最重要的两个属性,创建cookie时必须填写,其他属性可以使用默认值
  • cookie的名称或值如果包含非英文字母,则写入时需要使用 encodeURIComponent()编码,读取时使用decodeURIComponent()解码
document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent(
  '张三'
)}`
console.log(decodeURIComponent(document.cookie))
  • 一般名称名称使用英文,不要用中文,值可以使用中文,但是要编码
  1. 失效(到期)时间
  • 对于失效的cookie,会被浏览器清除

  • 如果没有设置失效(到期)时间,这样的 Cookie 称为会话 Cookie ,它存在内存中,当会话结束,也就是浏览器关闭时, Cookie 消失

  • 想长时间存在,需要设置expiresmax-age

  1. expires值为 Date 类型
  2. max-age值为数字,表示当前时间+多少秒后过期,单位是秒;如果max-age的值为 0 或负数,则cookie会被删除
document.cookie = `username=zs; expires=${new Date('2100-1-01 00:00:00')}`
document.cookie = `username=zs; max-age=${24 * 3600 * 30}` // 存活30天
  • Domain 域

Domain限定了访问cookie的范围(不同域名),使用JS只能读写当前域或父域的cookie,无法读写其他域的 cookie

document.cookie = 'username=alex;domain=www.immoc.com'
// 当前域: www.immoc.com  www.m.imooc.com
// 父域: .imooc.com
  • path 路径

path限定了访问cookie的范围(同一域名),使用 JS 只能读写当前路径和上級路径的 Cookie,无法读写下级路径的 Cookie

NameDomainPath这 3 个字段都相同的时候,才是同一个 cookie

  • HttpOnly

设置了 Httponly 属性的 Cookie 不能通过 JS 访问

  • Secure 安全标志

限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端

DomainpathSecure都要满足条件,还不能过期的 Cookie 才能随着请求发送到服务器端

// 写入cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
  let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`
  if (typeof maxAge === 'number') {
    cookieText += `; max-age=${maxAge}`
  }
  if (domain) {
    cookieText += `; domain=${domain}`
  }
  if (path) {
    cookieText += `; path=${path}`
  }
  if (secure) {
    cookieText += `; secure`
  }
  document.cookie = cookieText
}
// 通过name获取cookie的值
const get = name => {
  name = `${encodeURIComponent(name)}`
  const cookies = document.cookie.split('; ')
  for (const item of cookies) {
    const [cookieName, cookieValue] = item.split('=')

    if (cookieName === name) {
      return decodeURIComponent(cookieValue)
    }
    return undefined
  }
}
const remove = (name, { domain, path }) => {
  set(name, '', { domain, path, maxAge: -1 })
}
export { set, get, remove }
  1. 前后端都可以创建cookie

  2. cookie数量限制:当超过单个域名限制之后,在设置cookie,浏览器就会清除以前设置的cookie

3. cookie大小限制:每个cookie的存储容量很小,最多只有 4kB 左右

localStorage

认识 localStorage

  • localStorage也是一种浏览器存储数据的方式(本地存储),它只是存储在本地,不会发送到服务器端

  • 单个域名下的localStorage总大小有限制

  • 基本用法:

localStorage.setItem('username', 'alex')
console.log(localStorage.length)
localStorage.getItem('username') //获取不存在的返回null
localStorage.removeItem('useraname') //删除不存在的key,不报错
localStorage.clear() // 全部清除

localStorage 的注意事项

  1. 存储期限
    持久化的本地存储,除非手动清除,比如通过 js 删除,或者清除浏览器缓存,否则数据是永远不会过期的。

sessionStorage

当会话结束的时候,sessionStorage的数据会被清空,用法和localStorage一样

  1. localStorage键和值的类型

存储的键和值只能是字符串类型,不是字符串类型,也会先转化为字符串类型再存进去

  1. 不同域名下不能共用localStorage

  2. 兼容性:ie7以下不支持

查看网络技术的浏览器支持

Can I use____?open in new window

见 前端面试-> 计网&浏览器面试题

上次编辑于:
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1