How Vue encapsulates a TodoList

This article will give you a detailed introduction to the method of encapsulating a TodoList in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Using Vue to encapsulate a simple Todolist case. At the same time, the technical means of browser local caching are added.

Browser local buffer:

• Premise: Generally, the variables we define, or the data saved with Vuex, will be lost when the browser refreshes it. , this will not achieve the effect of historical records, but using the browser cache can help us solve this problem...

• The browser cache is divided into two types: sessionStorage and localStorage, the two prototype chains are as follows:

It can be seen that their prototype chains are basically the same , the only difference is that

• localStorage acts on the local cache and is persistent. Unless it is manually deleted or cleared, it will always exist in the browser

• sessionStorage functions with session caching. The life cycle only exists during the opening of the browser session. When the browser is closed, the information will be lost, and the data will still be saved by just refreshing the page.

In this example, sessionStorage is used and a small encapsulation is carried out.

const storage = { set(key, value){ window.sessionStorage.setItem(key, JSON.stringify(value)); }, get(key){ return JSON.parse(window.sessionStorage.getItem(key)); }, remove(key){ window.sessionStorage.removeItem(key); }}export default storage;

Example code:

Recommended learning:vue.js tutorial

The above is the detailed content of How Vue encapsulates a TodoList. For more information, please follow other related articles on the PHP Chinese website!