1. uniapp 本地存储的方式

  官方文档
  在uniapp项目开发中，本地存储是一个常见的需求。本地存储可以帮助我们在客户端保存和管理数据，以便在应用程序中进行持久化存储。本文将介绍uniapp中本地存储的几种方式，以及相关的代码示例。

1.1. 介绍

  在移动应用开发中，我们经常需要将一些数据保存在客户端，比如用户的个人设置、应用的配置信息等。uniapp提供了多种本地存储的方式，包括localStorage、sessionStorage、uni.setStorageSync和uni.setStorage等。接下来，我们将逐一介绍这些方式，并给出相应的代码示例。
  uniapp本地存储的几种方式
（1）localStorage：使用浏览器提供的localStorage API进行本地存储，可以存储字符串类型的数据，并且在同一域名下的所有页面共享。
（2）sessionStorage：与localStorage类似，但是数据只在当前会话期间有效，一旦会话结束就会被清除。
（3）uni.setStorageSync和uni.getStorageSync：uniapp提供的API，可以将数据存储在本地文件中，可以存储各种类型的数据，包括对象和数组。
（4）uni.setStorage和uni.getStorage：与uni.setStorageSync和uni.getStorageSync类似，但是使用异步方式进行存储和获取数据。
  这些方式可以根据实际需求选择合适的方式进行本地存储。

1.1.1. OBJECT参数

参数名类型必填说明
keyString是本地缓存中的指定的 key
dataAny是需要存储的内容，只支持原生类型、及能够通过 JSON.stringify 序列化的对象
successFunction否接口调用成功的回调函数
failFunction否接口调用失败的回调函数
completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）
uni.setStorage({
    key:"token",
    data:'123456789',
    success: function (){
        console.log("存储成功")
    }
})

1.2. 使用本地存储的好处

  uniapp使用本地存储的好处包括：
（1）数据持久化：本地存储可以将数据保存在用户设备上，即使用户关闭应用或重启设备，数据仍然可以被保留。
（2）减少网络请求：通过本地存储可以缓存一些常用的数据，减少对服务器的请求，提高应用的性能和加载速度。
（3）离线访问：本地存储可以使应用在没有网络连接的情况下仍然能够访问一些数据，提高用户体验。

1.3. 方法

1.3.1. localStorage

  localStorage是HTML5标准中定义的用于客户端存储的API。在uniapp中，我们可以直接使用localStorage来进行本地存储。
（1）说明

// 将数据存储到localStorage中
localStorage.setItem('key', 'value');
// 从localStorage中获取数据
var value = localStorage.getItem('key');

（2）实例

 /**
 * localStorage数据存储
 */
localStorageData: function () {
    // 将数据存储到localStorage中
    localStorage.setItem('SP_NAME', 'zzs');
    // 从localStorage中获取数据
    var value = localStorage.getItem('SP_NAME');
   console.log("从localStorage中获取数据:",value)
},

在这里插入图片描述

1.3.2. sessionStorage

  sessionStorage也是HTML5标准中定义的用于客户端存储的API，它与localStorage的区别在于数据只在当前会话期间有效。在uniapp中，我们同样可以直接使用sessionStorage来进行本地存储。
（1）说明

// 将数据存储到sessionStorage中
sessionStorage.setItem('key', 'value');
// 从sessionStorage中获取数据
var value = sessionStorage.getItem('key');

（2）实例

 /**
 * sessionStorage数据存储
 */
sessionStorageData: function () {
    // 将数据存储到sessionStorage中
    sessionStorage.setItem('SP_NAME2', 'zzs2');
    // 从sessionStorage中获取数据
    var value = sessionStorage.getItem('SP_NAME2');
   console.log("从sessionStorage中获取数据:",value)
},

在这里插入图片描述

1.3.3. uni.setStorageSync

  uni.setStorageSync是uniapp提供的本地存储方法之一，它可以将数据同步存储到本地。
（1）说明

// 将数据存储到本地
uni.setStorageSync('key', 'value');
// 从本地获取数据
var value = uni.getStorageSync('key');

（2）实例

/**
* setStorageSync数据存储
*/
setStorageSyncData: function () {
   // 将数据存储到本地
  uni.setStorageSync('SP_NAME3', 'zzs3');
  // 从本地获取数据
  var value = uni.getStorageSync('SP_NAME3');
 console.log("从setStorageSyncData中获取数据:", value)
},

在这里插入图片描述

1.3.4. uni.setStorage

  uni.setStorage是uniapp提供的另一种本地存储方法，它可以将数据异步存储到本地。
（1）说明

// 将数据异步存储到本地
uni.setStorage({
  key: 'key',
  data: 'value',
  success: function () {
    // 存储成功的逻辑
  }
});
// 从本地异步获取数据
uni.getStorage({
  key: 'key',
  success: function (res) {
    var value = res.data;
    // 获取数据成功的逻辑
  }
});

（2）实例

/**
* setStorage数据存储
*/
setStorageData: function () {
    // 将数据异步存储到本地
    uni.setStorage({
        key: 'SP_NAME4',
        data: 'zzs4',
        success: function () {
        // 存储成功的逻辑
       }
   });
    // 从本地异步获取数据
    uni.getStorage({
         key: 'SP_NAME4',
        success: function (res) {
             var value = res.data;
            // 获取数据成功的逻辑
            console.log("从setStorage中获取数据:", value)
        }
    });
},

在这里插入图片描述

1.4. 移除

1.4.1. 从本地缓存中异步移除指定key

  uni.removeStorage(OBJECT)

// An highlighted block
uni.removeStorage({
    key:'token',
    success: function(res){
        console.log('删除成功')
    }
})

1.4.2. 从本地缓存中同步移除指定key

  uni.removeStorageSync(KEY)

try {
    uni.removeStorageSync('storage_key')
} catch(e){
    //错误
}

1.4.3. 异步清除本地缓存

  uni.clearStorage()

uni.clearStorage();

1.4.4. 同步清理本地数据缓存

  uni.clearStorageSync()

try {
	uni.clearStorageSync();
} catch (e) {
	//错误
}

1.5. 完整代码

<template>
    <view>

    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        onLoad: function () {
            var that = this;
            //localStorage数据存储
            that.localStorageData()
            //sessionStorage数据存储
            that.sessionStorageData()
            //setStorageSync数据存储
            that.setStorageSyncData()
            //setStorage数据存储
            that.setStorageData()
        },
        methods: {
            /**
             * localStorage数据存储
             */
            localStorageData: function () {
                // 将数据存储到localStorage中
                localStorage.setItem('SP_NAME', 'zzs');
                // 从localStorage中获取数据
                var value = localStorage.getItem('SP_NAME');
                console.log("从localStorage中获取数据:", value)
            },
            /**
             * sessionStorage数据存储
             */
            sessionStorageData: function () {
                // 将数据存储到sessionStorage中
                sessionStorage.setItem('SP_NAME2', 'zzs2');
                var value = sessionStorage.getItem('SP_NAME2');
                console.log("从sessionStorage中获取数据:", value)
            },
            /**
             * setStorageSync数据存储
             */
            setStorageSyncData: function () {
                // 将数据存储到本地
                uni.setStorageSync('SP_NAME3', 'zzs3');
                // 从本地获取数据
                var value = uni.getStorageSync('SP_NAME3');
                console.log("从setStorageSync中获取数据:", value)
                //从本地缓存中同步移除指定key
                try {
                    uni.removeStorageSync('storage_key')
                } catch (e) {
                    //错误
                }
            },
            /**
             * setStorage数据存储
             */
            setStorageData: function () {
                // 将数据异步存储到本地
                uni.setStorage({
                    key: 'SP_NAME4',
                    data: 'zzs4',
                    success: function () {
                        // 存储成功的逻辑
                    }
                });
                // 从本地异步获取数据
                uni.getStorage({
                    key: 'SP_NAME4',
                    success: function (res) {
                        var value = res.data;
                        // 获取数据成功的逻辑
                        console.log("从setStorage中获取数据:", value)
                    }
                });
                //从本地缓存中异步移除指定key
                uni.removeStorage({
                    key: 'SP_NAME4',
                    success: function (res) {
                        console.log('SP_NAME4删除成功')
                    }
                })
                //从本地缓存中异步移除指定key
                uni.clearStorage();
                //从本地缓存中异步移除指定key
                uni.clearStorage();
                //异步清理本地数据缓存
                try {
                    uni.clearStorageSync();
                } catch (e) {
                    //错误
                }
                //同步清理本地数据缓存
                try {
                    uni.clearStorageSync();
                } catch (e) {
                    //错误
                }
            },
        }
    }
</script>
<style>
</style>

在这里插入图片描述

1.6. 结论

  本文介绍了uniapp中本地存储的几种方式，包括localStorage、sessionStorage、uni.setStorageSync和uni.setStorage。通过这些方式，我们可以方便地在uniapp应用中进行本地数据的存储和管理。根据具体的需求和场景，我们可以选择合适的方式来进行本地存储操作。希望本文能够帮助读者更好地理解uniapp中本地存储的相关知识，并在实际开发中得到应用。

# uni-app
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

新华网：开源盛会在江城——2024开放原子开发者大会侧记

开源盛会在江城——2024开放原子开发者大会侧记

avatar 开放原子开发者工作坊

新华社：释放开源潜能，加快构筑软件创新“朋友圈”

释放开源潜能，加快构筑软件创新“朋友圈”

avatar 开放原子开发者工作坊

开源鸿蒙：引领万物智联，加速生态崛起

开源鸿蒙：引领万物智联，加速生态崛起

avatar 开放原子开发者工作坊