uniapp 本地存储的方式

news2024/11/14 15:22:03

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.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. 完整代码

<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)
            },
            /**
             * 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)
                    }
                });
            },
        }
    }
</script>
<style>
</style>

在这里插入图片描述

1.5. 结论

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1437231.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

OSPF综合实验报告

实验要求&#xff1a; 实验预览图&#xff1a; 实验分析&#xff1a; 1、对R4仅仅配置端口IP和环回&#xff0c;使用共有IP 2、对R3-R7配置MGRE环境&#xff0c;以R3为hub&#xff0c;R5、R7、R6为spoke。 3、对172.16.0.0/16 IP进行子网划分&#xff0c;使得全网IP基于该网…

数据结构第十天(排序算法总结)

目录 前言 常数时间复杂度&#xff1a;O(1) 线性时间复杂度&#xff1a;O(n) 线性对数时间复杂度&#xff1a;O(n log n) 平方时间复杂度&#xff1a;O(n^2) 对数时间复杂度&#xff1a;O(log n) 前言 排序算法的学习可以告一段落了。但算法的学习永不停止。 今天&…

用python编写爬虫,爬取二手车信息+实验报告

题目 报告要求 工程报告链接放在这里 https://download.csdn.net/download/Samature/88805518使用 1.安装jupyter notebook 2.用jupyter notebook打开工程里的ipynb文件&#xff0c;再run all就行 注意事项 可能遇到的bug 暂无&#xff0c;有的话私信我

通过dockerfile 生成自定义nginx镜像

通过dockerfile生成自定义nginx镜像 &#xff01;&#xff01;&#xff01;docker 必须在linux环境下才能进行如果你是window则需要装虚拟机 新建一个文件名字为Dockerfile&#xff0c;无需后缀 文件完整名就是Dockerfile 编写dockerfile FROM nginx RUN echo hello nginx!…

golang windows 环境搭建 环境配置

golang windows 环境搭建 环境配置 Golang学习之路一环境搭建 MacBook Linux 树莓派raspberrypi安装Golang环境 官网下载地址: https://go.dev/dl/ https://golang.google.cn/dl/ 下载对应系统版本&#xff0c;例如windows 64位系统&#xff0c;下载&#xff1a;xxx.window…

年终奖,有人欢喜有人忧

每年的年终奖&#xff0c;有人欢喜有人忧&#xff0c;这是科技圈的一种共同现象。最近&#xff0c;科技界最热门的新闻无疑是Meta公布了其Q4和2023年全年财报&#xff0c;被许多人誉为“史上最强财报”。 Meta的股价也从2022年的最低点90美元左右&#xff0c;一路飙升至现在的每…

2024.02.06

TCP提供面向有连接的&#xff0c;可靠的数据传输服务&#xff0c;传输过程中&#xff0c;数据无误、数据无丢失、数据无失序、数据无重复 UDP面向无连接的&#xff0c;不保证数据可靠的&#xff0c;尽最大努力传输的协议&#xff0c;数据传输过程中&#xff0c;可能出现数据丢…

【C++11】统一初始化 和 initializer_list

文章目录 一、概念辨析1. 声明、定义、初始化、赋初值的概念2. 默认初始化 和 未被初始化 的概念 二、C98 的列表初始化三、C11 对列表初始化的扩展&#xff08;统一初始化&#xff09;四、标准库中的 initializer_list 类五、正确理解“统一初始化”和 initializer_list 的区别…

JRT监听程序

本次设计避免以往设计缺陷&#xff0c;老的主要为了保持兼容性&#xff0c;在用的设计就不好调了。 首先&#xff0c;接口抽象时候就不在给参数放仪器ID和处理类了&#xff0c;直接放仪器配置实体&#xff0c;接口实现想用什么属性就用什么属性&#xff0c;避免老方式要扩参数时…

Golang GC 介绍

文章目录 0.前言1.发展史2.并发三色标记清除和混合写屏障2.1 三色标记2.2 并发标记问题2.3 屏障机制Dijkstra 插入写屏障Yuasa 删除写屏障混合写屏障 3.GC 过程4.GC 触发时机5.哪里记录了对象的三色状态&#xff1f;6.如何观察 GC&#xff1f;方式1&#xff1a;GODEBUGgctrace1…

cocos creator 3.x 预制体无法显示

双击预制体&#xff0c;进入详情页&#xff0c;没有显示资源 Bomb 是个预制体&#xff0c;但是当我双击进来什么都没有了&#xff0c;无法对预制体进行可视化编辑 目前我只试出来一个解决方法&#xff1a; 把预制体拖进Canvas文件中&#xff0c;这样就能展示到屏幕上&#xff…

springboot集成easypoi导出多sheet页

pom文件 <dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.1.0</version> </dependency> 导出模板&#xff1a; 后端代码示例&#xff1a; /*** 导出加油卡进便利店大额审批列…

三网码支付系统源码,三网免挂有PC软件,有云端源码,附带系统搭建教程

搭建教程 1.先上传云端源码 然后配置Core/Config.php文件里面数据库信息注改&#xff1b;数据库帐号密码 2.云端源码里面Core/Api_Class/Instant_Url_List.php文件配置终端地址注改&#xff1b;第4 http://终端地址/ 3.导入云端数据库 账号admin 密码123456注改&#xff1…

ELAdmin 前端启动

开发工具 官方指导的是使用WebStorm&#xff0c;但是本人后端开发一枚&#xff0c;最终还是继续使用了 idea&#xff0c;主打一个能用就行。 idea正式版激活方式&#xff1a; 访问这个查找可用链接&#xff1a;https://3.jetbra.in/进入任意一个能用的里面&#xff0c;顶部提…

java---查找算法(二分查找,插值查找,斐波那契[黄金分割查找] )-----详解 (ᕑᗢᓫ∗)˒

目录 一. 二分查找&#xff08;递归&#xff09;&#xff1a; 代码详解&#xff1a; 运行结果&#xff1a; 二分查找优化&#xff1a; 优化代码&#xff1a; 运行结果&#xff08;返回对应查找数字的下标集合&#xff09;&#xff1a; ​编辑 二分查找&#xff08;非递归…

YUM | 包安装 | 管理

YUM 功能 软件包安装&#xff1a; 通过yum命令安装软件包。例如&#xff0c;安装一个名为 example-package 的软件包 yum install example-package更新包 检查更新&#xff1a; 检查可用更新&#xff1a; sudo yum check-update <package_name>软件包更新&#xff1a; y…

k8s报错记录(持续更新中....)

k8s报错记录(持续更新中…) 1. 部署k8s遇到kube-flannel已经构建&#xff0c;但是coredns一直处于ContainerCreating和pending状态 解决问题&#xff1a; 通过 kubectl describe pod -n kube-system coredns-7ff77c879f-9ls2b 查看pod的详细信息&#xff0c;报错说是cni 配置没…

Linux系统调试课:硬件断点

沉淀、分享、成长,让自己和他人都能有所收获!😄 📢在linux内核编程中,经常会遇到由于内存被篡改,例如 buffer overflow,野指针,write after free等。查找分析此类问题非常的麻烦。 一、什么是硬件断点 硬件断点,是Linux内核中是一种被ptrace和内核内调试器使用调试…

蓝桥杯嵌入式学习记录——点亮第一个LED(含软件的使用)

目录 一、蓝桥杯概述 二、软件的使用 三、点亮LED 一、蓝桥杯概述 蓝桥杯是一个编程大赛、商赛&#xff0c;获奖率高达60%&#xff08;省赛中一等奖10%、二等奖20%、三等奖30%&#xff09;&#xff0c;但这并不影响它的含金量&#xff0c;多所高校将它列为A类赛事并实行保研…

React+Echarts实现数据排名+自动滚动+Y轴自定义toolTip文字提示

1、效果 2、环境准备 1、react18 2、antd 4 3、代码实现 原理&#xff1a;自动滚动通过创建定时器动态更新echar的dataZoom属性startValue、endValue&#xff0c;自定义tooltip通过监听echar的鼠标移入移出事件&#xff0c;判断tooltTip元素的显隐以及位置。 1、导入所需组…