Common front-end cache -- springboot actual e-commerce project mall4j

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. localStorageThe 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.stringifyor JSON.parseto 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 keyand . 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 valuevaluejson

• The API is basically the same

Differences between localStorage and sessionStorage

• The life cycle

  • localStorageStored data is permanent and will remain there unless the user deletes it manually.
  • sessionStorageStored data is cleared when the current session ends, and all sessionStorage stored .

• scope

  • localStorage: In the same browser, localStoragedata is shared between documents of the same origin, which can be read, overwritten, and cleared from each other (same browser restrictions, same origin restrictions)
  • sessionStorageIn 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

  Mall4j open source mall project

{{o.name}}

{{m.name}}