您的位置:

uniapp本地存储详解

一、uniapp本地存储介绍

uniapp提供了一套完整的本地存储机制,既包括完整的API使用,也提供了一些简化开发的封装,使得开发者可以轻松地进行数据存储。uniapp本地存储可以在h5、小程序、app等多个平台上使用,而且使用起来非常简单。uniapp主要提供了三种本地存储方式:localStorage、sessionStorage、uni.setStorageSync。

二、localStorage和sessionStorage

localStorage和sessionStorage都是HTML5中新增的本地存储技术,它们的主要区别在于存储数据的作用域不同。localStorage存储的数据没有时间限制,即使关闭浏览器再打开,数据依然存在;而sessionStorage只能存储会话期间需要保存的数据,即数据只在浏览器关闭前有效。uniapp提供了本地存储API uni.setStorage和uni.getStorage,可以方便地对localStorage和sessionStorage进行操作。


// 存储数据到localStorage
uni.setStorageSync('key', 'value');

// 从localStorage获取数据
let value = uni.getStorageSync('key');

实际使用中, uni.setStorageSync和uni.getStorageSync方法的参数同样也支持对象,可以通过该方法一次性存储多个数据。


// 存储多个数据到localStorage
uni.setStorageSync({
  key1: 'value1',
  key2: 'value2'
});

// 从localStorage获取多个数据
let data = uni.getStorageSync({
  key1: '',
  key2: ''
});

三、uni.setStorageSync

uni.setStorageSync是uniapp提供的封装本地存储方法,它可以方便地存储任何类型的数据,并且将数据存储到特定的路径中。使用uni.setStorageSync存储数据有一个优势,就是可以通过uni.vibrateShort()提示用户数据已经存储成功。uni.setStorageSync的存储路径有两种方式:

1、uni.setStorageSync(key, value):将数据存储在uniapp自定义的存储路径中;

2、uni.setStorageSync({key: '', data: ''}):将数据存储在指定的路径中,可以是本地文件路径或是应用缓存路径。


// 存储数据到默认路径
uni.setStorageSync('key', 'value');

// 存储数据到指定路径
uni.setStorageSync({
  key: 'path/to/file',
  data: 'Hello, World'
});

四、uni.getStorageSync

uni.getStorageSync是uniapp提供的读取本地存储数据的方法,它可以方便地读取指定路径下的数据,并将数据以Object形式返回。使用uni.getStorageSync读取数据也有一个优势,就是可以通过uni.showToast()方法提示用户数据读取成功。uni.getStorageSync读取数据的路径与uni.setStorageSync存储数据的路径是一样的,使用方法如下:


// 从默认路径中获取数据
let value = uni.getStorageSync('key');

// 从指定路径中获取数据
let data = uni.getStorageSync({
  key: 'path/to/file',
  success: function(res) {
    uni.showToast({
      title: '数据读取成功'
    });
  }
});

五、uni.removeStorageSync

uni.removeStorageSync是uni提供的删除指定路径下的本地存储数据的方法。数据删除之后,通过uni.getStorageSync无法再次读取该数据。uni.removeStorageSync的使用方法与uni.getStorageSync、uni.setStorageSync的使用方法非常相似,只需要传入要删除的数据的路径即可:


// 删除指定路径下的数据
uni.removeStorageSync({
  key: 'path/to/file',
  success: function(res) {
    uni.showToast({
      title: '数据删除成功'
    });
  }
});

六、总结

通过以上的介绍,我们可以看到uniapp提供了非常完善的本地存储机制,并且API使用非常简单。在实际开发中,我们可以根据实际需求选择存储方式,进行数据的存取操作。当然,uniapp提供的本地存储方式只是我们了解的冰山一角,在实际开发中我们还有更多的方案来进行数据的存取操作,需要我们不断地学习和探索。