Comment faire du stockage local dans Vue ?

Vue est un framework JavaScript frontal populaire qui offre de nombreuses fonctionnalités pratiques, notamment le stockage local. Le stockage local fait référence au stockage des données dans le navigateur de l'utilisateur afin qu'elles puissent être facilement récupérées et utilisées lors de visites ultérieures. Cet article explique comment effectuer un stockage local dans Vue.

Vue propose une variété d'options de stockage local, notamment les cookies, localStorage et sessionStorage. Ces options ont des utilisations et des limites différentes, et elles doivent être sélectionnées en fonction des besoins spécifiques lors de leur utilisation.

1. Utiliser des cookies pour le stockage local

Un cookie est un petit fichier texte stocké sur l'ordinateur de l'utilisateur. Ils peuvent être utilisés pour stocker des informations de base telles que les préférences de l'utilisateur ou le contenu du panier. Vue fournit un plugin vue-cookies qui facilite l'utilisation des cookies pour stocker et récupérer des données.

Tout d'abord, vous devez installer le plugin vue-cookies dans le projet Vue. Vous pouvez utiliser la commande npm pour installer :

npm install vue-cookies --save

Une fois l'installation terminée, introduisez le plug-in vue-cookies dans l'instance Vue :

import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

Vous pouvez maintenant utiliser l'objet $cookies pour le stockage des cookies. Voici un exemple :

// 存储数据
this.$cookies.set('key', 'value', 1)

// 检索数据
this.$cookies.get('key')

2. Utilisation de localStorage pour le stockage local

localStorage est une API qui stocke les données dans le navigateur de l'utilisateur, qui peut conserver les données après que l'utilisateur ferme le navigateur. Vue fournit un objet global $localStorage qui peut être utilisé pour stocker et récupérer des données.

Ce qui suit est un exemple :

// 存储数据
this.$localStorage.set('key', 'value')

// 检索数据
this.$localStorage.get('key')

localStorage peut stocker des tailles de données plus importantes, mais ne peut stocker que 5 Mo de données par nom de domaine. Il convient donc de veiller à ne pas dépasser la limite lors du stockage de grandes quantités de données.

3. Utilisez sessionStorage pour le stockage local

sessionStorage est similaire à localStorage, les deux sont des API qui stockent les données dans le navigateur de l'utilisateur. La différence est que sessionStorage sera supprimé une fois que l'utilisateur ferme le navigateur. Vue fournit un objet global $sessionStorage, qui peut être utilisé pour stocker et récupérer des données.

Ce qui suit est un exemple :

// 存储数据
this.$sessionStorage.set('key', 'value')

// 检索数据
this.$sessionStorage.get('key')

sessionStorage peut également stocker des tailles de données plus importantes, mais chaque nom de domaine ne peut stocker que 5 Mo de données. Il convient donc de veiller à ne pas dépasser la limite lors du stockage de grandes quantités de données.

Résumé

Vue propose une variété d'options de stockage local, notamment les cookies, localStorage et sessionStorage, qui peuvent être sélectionnées en fonction de besoins spécifiques. Lors de l'utilisation, vous devez faire attention à la taille des données et à la limite que chaque option peut stocker, et les utiliser judicieusement pour éviter de dépasser la limite. Le stockage local peut être facilement effectué en utilisant les objets globaux $cookies, $localStorage et $sessionStorage fournis par Vue.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!