// cookie：是浏览器中一个存储数据的字段
console.log(document.cookie)
// 1.cookie是一段字符串，网页刷新时，不会重置
// document。cookie="荆轲刺秦王"
// 2.dookis虽然是字符串，但里边的数是以键值对存储的，可以通过键改值
// document.cookie="name=张三" cookie数据是键值对结构
// document.cookie="age=12" 不同的键不会替换，会拼接
// document.cookie="name=李四" 相同的键会替换
// 3.不是键值对，会被键值对覆盖，他有默认的键为空(不建议)
// document.cookie="两条毛腿肩上扛"
// 4.cookie有效期：默认会话cookie，窗口关闭则过期销毁
// cookie可以设置有效期，实现长期有效，叫有效期cookie/长期cookie
document.cookie = "name=zhangsan;max-age=3600" //设置一小时的有效期
document.cookie = "age=20;max-age=-1" //有效期为负值，立即删除
// 5.当浏览器发起ajax请求时，会把本地的cookie自动放入请求头发给服务器
// 限制条件：cookie只支持同源请求，跨域请求头中没有cookie
// 注意：由于请求头不支持中文，所以cookie中尽量不放中文
fatch('/login')
fetch('https://m.douyu.com/api/room/list?page=1')
// 6.webStorage=localStorage+sessionStorage是H5新增的
// sessionStorage 会话存储，作用相当于没有设置有效期的cookie
// localStorage 本地存储，作用相当于设置了有效期的cookie
// 增
localStorage.setItem("name", "local")
sessionStorage.setItem("name", "session")
// 删
localStorage.removeItem("name1")
sessionStorage.removeItem("name2")
localStorage.clear()
sessionStorage.clear()
// 改
localStorage.setItem("name", "张三")
sessionStorage.setItem("name2", "李四")
// 查
var name1 = localStorage.getItem("name1")
var name2 = sessionStorage.getItem("name2")
for (let i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i)
var value = localStorage.getItem(key)
console.log(key, value)
}
总结: cookie和webStorage的区别?
1, cookie是document的属性, webStorage是window的属性
2, cookie限制大小4KB, webStorage限制大小 5MB
3, cookie会随ajax请求头发给服务器, webStorage只能在浏览器本地存储