Modify local data in uniapp

In Uniapp, we often need to use local data for page display or interaction, but sometimes we need to modify this data, such as users modifying profile information or changing application settings. So, how to modify local data in Uniapp? This article will explain it to you in detail.

1. Local data storage methods

There are many ways to store local data in Uniapp, such as LocalStorage, SessionStorage, IndexedDB, etc. Different storage methods have different usage scenarios and methods. We need to choose the appropriate method according to actual needs.

LocalStorage is a more commonly used local data storage method. It can retain data after the browser is closed and has good sustainability. SessionStorage can only retain data during the browser session, and the data will be lost after closing the browser; IndexedDB is a more powerful local database storage method that can perform complex data queries and operations, but requires writing more cumbersome code.

In this article, we use LocalStorage as an example to explain.

2. The process of modifying local data

The storage structure of data in LocalStorage is key-value pair. We need to first obtain the data that needs to be modified, and then modify it. Modify, and finally save the modified data back to LocalStorage.

The specific process is as follows:

1. Get the data in LocalStorage

In Uniapp, you can get the value of the specified key in LocalStorage through the uni.getStorageSync(key) method , this method is synchronous, that is, while obtaining data, program execution will be blocked until the value is obtained. For example:

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

2. Modify data

After obtaining the data in LocalStorage, we can modify it. Taking user profile information as an example, assuming that the user's nickname and avatar link need to be modified, the code is as follows:

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

3. Store the modified data

Restore the modified data to LocalStorage , you can use the uni.setStorageSync(key, data) method, which writes the specified data to LocalStorage and returns a Boolean value to indicate whether the storage is successful. For example:

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

It should be noted that when the key already exists, the setStorageSync method will overwrite the value corresponding to the key with a new value; when the key does not exist, a new key-value pair will be created. .

3. Code Example

The following is a complete code example that demonstrates how to modify local data:

<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>

It should be noted that the handleModify method in the above code is only Examples need to be written according to your own needs for actual use.

4. Summary

In Uniapp, modifying local data requires following the acquisition-modification-storage process. We can choose a local data storage method that suits us, such as LocalStorage, SessionStorage, IndexedDB, etc., and at the same time master the data reading and writing methods so that we can quickly and efficiently operate local data in actual applications.

The above is the detailed content of Modify local data in uniapp. For more information, please follow other related articles on the PHP Chinese website!