Modifier les données locales dans uniapp

Dans Uniapp, nous devons souvent utiliser des données locales pour l'affichage ou l'interaction des pages, mais nous devons parfois modifier ces données, par exemple lorsque les utilisateurs modifient les informations de profil ou les paramètres de l'application. Alors, comment modifier les données locales dans Uniapp ? Cet article vous l’expliquera en détail.

1. Méthodes de stockage de données locales

Il existe de nombreuses façons de stocker des données locales dans Uniapp, telles que LocalStorage, SessionStorage, IndexedDB, etc. Différentes méthodes de stockage ont différents scénarios et méthodes d'utilisation. Nous devons choisir la méthode appropriée en fonction des besoins réels.

LocalStorage est une méthode de stockage de données locale plus couramment utilisée. Elle peut conserver les données après la fermeture du navigateur et a une bonne durabilité. SessionStorage ne peut conserver les données que pendant la session du navigateur, et les données seront perdues après la fermeture du navigateur ; IndexedDB est une méthode de stockage de base de données locale plus puissante qui peut effectuer des requêtes et des opérations de données complexes, mais nécessite l'écriture de code plus lourd.

Dans cet article, nous utilisons LocalStorage comme exemple pour expliquer.

2. Le processus de modification des données locales

La structure de stockage des données dans LocalStorage est une paire clé-valeur Nous devons d'abord obtenir les données qui doivent être modifiées. . Modifiez-le ensuite, et enfin enregistrez les données modifiées dans LocalStorage.

Le processus spécifique est le suivant :

1. Obtenez les données dans LocalStorage

Dans Uniapp, vous pouvez les obtenir via uni.getStorageSync Méthode (key) Spécifiez la valeur de la clé dans LocalStorage. Cette méthode est synchrone, c'est-à-dire que lors de l'obtention des données, l'exécution du programme sera bloquée jusqu'à ce que la valeur soit obtenue. Par exemple :

let userData = uni.getStorageSync('userData');

2. Modifier les données

Après avoir obtenu les données dans LocalStorage, nous pouvons les modifier. En prenant comme exemple les informations du profil utilisateur, en supposant que le pseudo et le lien de l'avatar de l'utilisateur doivent être modifiés, le code est le suivant :

userData.nickname = 'newNickname';
userData.avatarUrl = 'newAvatarUrl';

3 Stockez les données modifiées

#🎜🎜. #Restaurer les données modifiées Pour stocker dans LocalStorage, vous pouvez utiliser la méthode uni.setStorageSync(key, data), qui écrira les données spécifiées dans LocalStorage et renverra une valeur booléenne pour indiquer si le stockage est réussi. Par exemple :

const res = uni.setStorageSync('userData', userData);
if(res) {
  console.log('数据存储成功');
} else {
  console.log('数据存储失败');
}

Il est à noter que lorsque la clé existe déjà, la méthode setStorageSync écrasera la valeur correspondant à la clé par une nouvelle valeur ; lorsque la clé n'existe pas, une nouvelle clé sera créée ; être créée paire de valeurs.

3. Exemple de code

Ce qui suit est un exemple de code complet qui montre comment modifier les données locales :

<script>
  export default {
    data() {
      return {
        userData: null
      }
    },
    methods: {
      // 点击修改按钮时触发
      handleModify() {
        // 获取LocalStorage中的数据
        this.userData = uni.getStorageSync('userData');

        // 修改数据
        this.userData.nickname = 'newNickname';
        this.userData.avatarUrl = 'newAvatarUrl';

        // 存储修改后的数据
        const res = uni.setStorageSync('userData', this.userData);
        if(res) {
          console.log('数据存储成功');
        } else {
          console.log('数据存储失败');
        }
      }
    }
  }
</script>

Il convient de noter que le code ci-dessus La méthode handleModify dans n'est qu'un exemple. Vous devez l'écrire en fonction de vos propres besoins lorsque vous l'utilisez dans la pratique.

4. Résumé

Dans Uniapp, la modification des données locales doit suivre le processus d'acquisition-modification-stockage. Nous pouvons choisir une méthode de stockage de données locale qui nous convient, telle que LocalStorage, SessionStorage, IndexedDB, etc., et en même temps maîtriser les méthodes de lecture et d'écriture des données afin de pouvoir exploiter rapidement et efficacement les données locales dans des applications réelles.

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!