uniapp本地存储详解

OCUU • 2024-10-10 08:47 • 编程

一、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提供的本地存储方式只是我们了解的冰山一角，在实际开发中我们还有更多的方案来进行数据的存取操作，需要我们不断地学习和探索。

原创文章，作者：OCUU，如若转载，请注明出处：https://www.506064.com/n/142147.html