浏览器本地缓存

浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage

共同点: 都是保存在浏览器端、且同源的

不同点:

  1. cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下sessionStoragelocalStorage不会自动把数据发送给服务器,仅在本地保存。
  2. 存储大小限制也不同,
  • cookie数据不能超过4K,sessionStorage和localStorage可以达到5M
  • sessionStorage:仅在当前浏览器窗口关闭之前有效;
  • localStorage:始终有效,窗口或浏览器关闭也一直保存,本地存储,因此用作持久数据;
  • cookie:只在设置的cookie过期时间之前有效,即使窗口关闭或浏览器关闭
  1. 作用域不同
  • sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面;
  • localstorage:在所有同源窗口中都是共享的;也就是说只要浏览器不关闭,数据仍然存在
  • cookie: 也是在所有同源窗口中都是共享的.也就是说只要浏览器不关闭,数据仍然存在

windos

windows      
全局变量 document.cookie sessionStorage localStorage
API

1. 字符串拼接

document.cookie="name=huangbiao;domain=.google.com";

 

2.    npm    i    js-cookie

import Cookies from 'js-cookie'

Cookies.set('name', 'value', { path: '' })
Cookies.get('name')	// => 'value'
Cookies.remove('name', { path: '' })
// ... 其他api

 

posted @ 2021-11-25 11:29  Dz&Ying  阅读(267)  评论(0编辑  收藏  举报