JIYIK CN >

In Vue, we usually need to persist data so that the data status can be retained after the user refreshes the page or closes the browser. Common implementation methods include using cookies and localstorage.

Use of cookies

Cookies are a simple client-side storage method that can store small amounts of data on the client. In Vue, you can use the js-cookie library to easily operate cookies.

First, you need to install js-cookie:

$ npm install js-cookie --save

Then, in the component that needs to use cookies, introduce js-cookie:

import Cookies from 'js-cookie'

Next, you can use Cookies.set()the method to set the cookie:

Cookies.set('key', 'value', { expires: 7 })

The first parameter is the cookie name, the second parameter is the cookie value, and the third parameter is an optional configuration item, such as expiration time.

Use Cookies.get()the method to get the cookie value:

Cookies.get('key')

Cookies.remove()Cookies can be deleted using the method:

Cookies.remove('key')

Using localstorage

localstorage is a way to store larger data on the client side, which can store multiple key-value pairs. In Vue, you can use the window.localStorage object to conveniently operate localstorage.

Using localstorage is similar to using cookies. First, you need to use setItem()the method to set localstorage:

window.localStorage.setItem('key', 'value')

Use getItem()the method to get the localstorage value:

window.localStorage.getItem('key')

Use removeItem()the method to delete localstorage:

window.localStorage.removeItem('key')

It should be noted that localstoragethe stored value must be of string type. If you need to store non-string data such as objects or arrays, you need to use the JSON.stringify() method to convert it to a string type, and use JSON.parse()the method to convert it back to the original type.

For example, to store an object:

const obj = { name: 'Jack', age: 18 }
window.localStorage.setItem('key', JSON.stringify(obj))

Get the object:

const objStr = window.localStorage.getItem('key')
const obj = JSON.parse(objStr)

Summarize

Both cookies and localstorage are ways to persist data on the client side. Choose the appropriate method based on actual needs. For scenarios where you need to store smaller data, cookies are more convenient; for scenarios where you need to store larger data, localstorage is more appropriate. In Vue, you can use the js-cookie library and window.localStorageobject to easily operate cookies and localstorage.