浏览器 本地缓存

##本地缓存和cookie localStorage sessionStorage

1.cookie

1. 前端 cookie特点，作用机制，方法
   大小4k
   参考1
   参考2
   a 为一个cookie设置其他信息，注意分号
   document.cookie=‘age=18;expires=6546465xx6546’;
   b 多条cookie
   document.cookie=‘age=18;expires=6546465xx6546’;
   document.cookie=‘id=1245458’;
   c 删除cookie
     Q
     重复设置cookie会覆盖吗，还是设置无效？
     A 会覆盖
   d 获取
    document.cookie
   不会含有expires和其他的信息

    let data = new Date().getTime()   //先将此时的时间转化为毫秒
    let new_data = new Date(data + 7*24*60*60*1000)  //将过期时间设置为7天后
    //设置第一条 cookie
    document.cookie = 'name=张三;' + 'expires=' + new_data.toUTCString()
    //设置第二条 cookie
    document.cookie = 'age=19;' + 'expires=' + new_data.toUTCString()
     console.log(document.cookie);//不会含有expires的信息

3. cookie的简单应用场景
   1 早些年，jd页面，未登录状态，添加商品到购物车，浏览器页面关闭重新打开该页面，购物车还有物品。
   电脑关闭重新打开，购物车还有物品。
   说明购物车的物品存在了硬盘而不是内存。
   2 邮箱登录后，重新登录，跳过验证页面，直接进入首页。

2 localStorage

5M
设置
localStorage.setItem(‘age’,18)
内部18保存为字符串，实际上他的属性值都是字符串
getItem(‘age’)//18
Q:如果想得到“18”，set时18加引号？
A : set时18变为’ “18” ’
可以利用JSON.stringify() 除了值的位置是number不加引号，否则键和值都加引号{luckyNum:8,name1:“ldx”}变为’{“luckyNum”:8,“name1”:“ldx”}’
逆向JSON.parse()
读取
localStorage.getItem(‘age’)
删除
localStorage.delete(‘age’)
localStorage.removeItem(‘age’)
localStorage.clear()删除所有

3 sessionStorage

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储，而 sessionStorage 属于当会话结束的时候，sessionStorage 中的键值对会被清空。