JavaScript----浏览器存储

cookie

• cookie是客户端的会话跟踪技术(服务端为session)
• 作用: 将数据存储在浏览器中
• 生命周期:
  • 默认是一次会话(浏览器关闭)
  • 如果通过expires=设置了过期时间, 并且过期时间没有过期, 那么下次打开浏览器还是存在
  • 如果通过expires=设置了过期时间, 并且过期时间已经过期了,那么会立即删除保存的数据
• 注意点:
  • cookie不能一次性存储多条数据,要想保存数据,必须一条一条的设置
  • cookie默认不会保存任何的数据
  • cookie有大小和数量的限制:
    • 数量: 20~40个
    • 个数: 4KB左右
• cookie的作用范围:
  • 在同一浏览器下,如果在当前浏览器中保存了数据,那么它的下一级路径下的浏览器也可以访问
  • 在同一个浏览器下,如果在当前浏览器保存了数据,如果想要上级访问,需要在path属性上添加/
• 作用范围的注意点:
  • 跨域的浏览器不能访问同一个cookie,需要访问则需要加一个domain的属性,值为域名
• cookie的保存格式

var date = new Date();
date.setDate(date.getDate() + 1);

document.cookie("name = xxz;path=/;domain=baidu.com;expires = "+date.toGMTString()+";",

---

hash

• hash也是一种储存浏览器数据的方式
• 特点: 浏览器url后面会加上#和hash保存的数据
• 存储格式: window.location.hash = 值;

---

H5提供的新的存储方案

• 以下新增方案都具备以下特点,可以弥补cookie和hash的不足
• 特点:
  • 设置、读取方便、页面刷新不丢失数据
  • 容量较大，sessionStorage约5M、localStorage约20M
  • 只能存储字符串，可以将对象JSON.stringify() 编码后存储

window.sessionStorage

• 容量约为5M
• 生命周期为关闭浏览器窗口
• 在同一个窗口(页面)下数据可以共享
• 格式:
  • window.sessionStorage.setItem('name', 'lnj');
• 获取用getItem,删除用removeItem,删除所有用clear

window.localStorage

• 除了特点有所不同,其余和sessionStorage完全相同