常用前端缓存

Mall4j开源商城项目

1. LocalStorage

本地持久性的缓存,保存之后,不通过手动清除的话,将会一直保存在浏览器中。localStorage 中的键值对总是以字符串的形式存储,这意味着某些数据类型会发生改变。所以在保存或取出数据时,经常使用到JSON.stringifyJSON.parse 将数据在对象和字符串间互相转化

2. SessionStorage

会话级别的本地存储,它和 localStorage 很相似。最大区别在于:当浏览器被关闭时,sessionStorage的存储内容将全部丢失。

localStorage.length   		// 获得storage中的个数
localStorage.key(n)    		// 获得storage中第n个元素对的键值(第一个元素是0)
localStorage.getItem(key)   // 获取键值key对应的值
localStorage.key    		// 获取键值key对应的值
localStorage.setItem(key, value)    // 添加数据,键值为key,值为value
localStorage.removeItem(key)    	// 移除键值为key的数据
localStorage.clear()    	// 清除所有数据

localStorage 和 sessionStorage 都有同源策略限制,大小均在5MB左右

3. Cookie

HTTP协议本身是无状态的。Cookie实际上是一小段的文本信息(key-value格式)。客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。

Cookie的部分属性

NAME=VALUE 键值对,保存的名字和存储的值
Expires 过期时间
Path 该 Cookie 是在当前的哪个路径下生成的,如 path=/index/

Cookie原生的API不及Storage友好,更多时候都使用 npm 的 js-cookie

import Cookies from 'js-cookie'

Cookies.set('name', 'value') // 创建简单的cookie
Cookies.set('name', 'value', { expires: 7 }) // 创建有效期为7天的cookie
Cookies.set('name', 'value', { expires: 7, path: '' }) // 为当前页创建有效期7天的cookie

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
//获取所有cookie
Cookies.get(); // => { name: 'value' }

Cookies.remove('name') // 删除指定Cookie

小结

localStorage 和 sessionStorage 的相同点

  • 存储大小一般均为5M左右

  • 都有同源策略限制,即无法跨域访问

  • 数据仅在客户端中保进行存储,并不参与和服务器的通信(不会随着 http 请求发送到服务器)

  • keyvalue 的形式进行存储数据, value 值必须为字符串,不为字符串会自动转型( value 如果是对象则需要转为 json 进行存储)

  • API基本一致

localStorage 和 sessionStorage 的不同点

  • 生命周期

    • localStorage 存储的数据是永久性的,除非用户人为删除,否则会一直存在。
    • sessionStorage 存储的数据在当前会话结束时会被清除,浏览器关闭时,所有 sessionStorage 存储的数据会被删除。
  • 作用域

    • localStorage: 在同一个浏览器内,同源文档之间共享 localStorage 数据,可以互相读取、覆盖、清除(同浏览器限制、同源限制)
    • sessionStorage 的作用域除了同源限制外,还被限定在了窗口中,只有同一浏览器、同一窗口才能读取和访问

    Mall4j开源商城项目

05-28 21:28