Common front-end cache
Mall4j open source mall project
1. LocalStorage
The local persistent cache, after saving, will always be saved in the browser if it is not cleared manually. localStorage
The key-value pairs in are always stored as strings, which means that some data types change. So when saving or retrieving data, it is often used JSON.stringify
or JSON.parse
to convert data between objects and strings
2. SessionStorage
Session-level local storage, similar to localStorage. The biggest difference is that when the browser is closed, the stored contents of sessionStorage will all be lost.
localStorage and sessionStorage common APIs
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() // 清除所有数据
Both localStorage and sessionStorage have same-origin policy restrictions, and the size is about 5MB
3. Cookie
The HTTP protocol itself is stateless. A cookie is actually a small piece of text information (key-value format). The client initiates a request to the server, and if the server needs to record the user's status, it uses the response to issue a cookie to the client browser. The client browser will save the cookie. When the browser requests the website again, the browser submits the requested URL to the server together with the cookie. The server checks the cookie to identify the user's status.
Some properties of cookies
Attributes | attribute meaning |
---|---|
NAME=VALUE | key-value pair, stored name and stored value |
Expires | Expiration |
Path | Which path is the cookie generated under, such as path=/index/ |
Cookie's native API is not as friendly as Storage's, and npm's is used more oftenjs-cookie
js-cookie 的API
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
summary
Similarities between localStorage and sessionStorage
-
The storage size is generally about 5M
-
Both have same-origin policy restrictions, that is, cross-domain access is not possible
-
The data is only stored in the client, and does not participate in the communication with the server (it will not be sent to the server with the
http
request ) -
Store data in the form of
key
and . The value must be a string. If it is not a string, it will be automatically converted ( if it is an object, it needs to be converted to for storage)value
value
value
json
-
The API is basically the same
Differences between localStorage and sessionStorage
-
The life cycle
localStorage
Stored data is permanent and will remain there unless the user deletes it manually.sessionStorage
Stored data is cleared when the current session ends, and allsessionStorage
stored .
-
scope
localStorage
: In the same browser,localStorage
data is shared between documents of the same origin, which can be read, overwritten, and cleared from each other (same browser restrictions, same origin restrictions)sessionStorage
In addition to the same-origin restriction, the scope is also limited to the window, and only the same browser and the same window can read and access