uniapp 本地存储的方式

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.mzph.cn/news/673160.shtml

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

相关文章

#Js篇:字符串的使用方法es5和es6

字符串 \ &#xff1a;单引号&#xff08;\u0027&#xff09;\" &#xff1a;双引号&#xff08;\u0022&#xff09; charAt 定义&#xff1a; 返回指定位置的字符&#xff0c;参数时从0开始编号的位置 参数&#xff1a; 位置下标 abc.charAt(1) // "b" …

瑞_力扣LeetCode_二叉树相关题

文章目录 说明题目 144. 二叉树的前序遍历题解 题目 94. 二叉树的中序遍历题解 题目 145. 二叉树的后序遍历题解 题目 105. 从前序与中序遍历序列构造二叉树题解 题目 106. 从中序与后序遍历序列构造二叉树题解 &#x1f64a; 前言&#xff1a;本文章为瑞_系列专栏之《刷题》的…

【深度学习】Softmax实现手写数字识别

实训1&#xff1a;Softmax实现手写数字识别 相关知识点: numpy科学计算包&#xff0c;如向量化操作&#xff0c;广播机制等 1 任务目标 1.1 简介 本次案例中&#xff0c;你需要用python实现Softmax回归方法&#xff0c;用于MNIST手写数字数据集分类任务。你需要完成前向计算…

牛客周赛 Round 31 E.小红的子集取反【dp+设置偏移量】

原题链接&#xff1a;https://ac.nowcoder.com/acm/contest/74362/E 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 262144K&#xff0c;其他语言524288K 64bit IO Format: %lld 题目描述 小红拿到了一个数组&#xff0c;她准备选择若干元素…

python将Word页面纸张方向设置为横向

通过python-docx的章节属性&#xff0c;就可以更改纸张方向、纸张尺寸。 import docx from docx.enum.section import WD_ORIENT from docx.shared import Cmdocument docx.Document() section document.sections[0]# 设置纸张大小为A4大小 section.page_width Cm(21) sect…

work day7

第七章 运算符重载 一、填空题 1、在下列程序的空格处填上适当的字句&#xff0c;使输出为&#xff1a;0&#xff0c;2&#xff0c;10。 #include <iostream> #include <math.h> class Magic {double x; public: Magic(double d0.00):x(fabs(d)) {} Magic operato…

2023年全国职业院校技能大赛软件测试赛题第3套

2023年全国职业院校技能大赛 软件测试赛题第3套 赛项名称&#xff1a; 软件测试 英文名称&#xff1a; Software Testing 赛项编号&#xff1a; GZ034 归属产业&#xff1a; 电子与信息大类 …

语雀·教育邮箱现在提供免费一年会员资格!

作为一位深度使用电子笔记的用户&#xff0c;我曾长期使用印象笔记&#xff0c;后来发现有道云笔记也非常适合我的需求。然而&#xff0c;我最近发现语雀和飞书等云笔记服务越来越出色。&#xff08;相比之下&#xff0c;有道云笔记的启动速度较慢&#xff0c;而且存在各种广告…

Rust 初体验1

Rust 初体验 安装 打开官网&#xff0c;下载 rustup-init.exe&#xff0c; 选择缺省模式&#xff08;1&#xff09;安装。 国内源设置 在 .Cargo 目录下新建 config 文件&#xff0c;添加如下内容&#xff1a; [source.crates-io] registry "https://github.com/rus…

【教程】微服务使用Feign接口进行远程调用的步骤

Sample 以 finance 模块 调用 exchange 模块 的 MarketService 为例。 Steps 服务提供者&#xff08;exchange&#xff09;&#xff1a;搭建接口 在 exchange-api 下&#xff0c;新建 MarketDto 和 MarketServiceFeign。并在 exchange-service 下使用 MapStruct 进行映射。…

JVM 性能调优- 五种内存溢出(5)

在介绍之前先简单介绍下 直接内存(Direct Memory)和堆内存(Heap Memory): 关系: 直接内存并不是Java虚拟机的一部分,它是通过Java的NIO库中的ByteBuffer来分配和管理的。直接内存通常由操作系统的本地内存(Native Memory)提供支持。堆内存是Java虚拟机的一部分,用于存…

在线音乐服务器测试报告

一、项目背景 在线音乐服务器采用前后端分离的方法来实现&#xff0c;同时使用了数据库来存储相关的数据&#xff0c;同时将其部署到云服务器上。前端主要有个页面构成&#xff1a;登录页、音乐列表页、收藏音乐页等&#xff0c;以上模拟实现了最简单的在线音乐服务器。其结合后…

【深入浅出MySQL】「底层原理」InnoDB索引原理全程实操指南,带你从入门到精通

InnoDB索引原理全程实操指南&#xff0c;带你从入门到精通 每日一句前言概述正文介绍索引的介绍创建索引聚集索引非聚集索引**如果我的表没有建立主键该怎么办呢&#xff1f;** 索引原理什么情况不去聚集索引树去查询&#xff1f;版权声明 每日一句 不要停顿,因为别人会超过你;…

机器学习 | 揭示EM算法和马尔可夫链的实际应用

目录 初识EM算法 马尔可夫链 HMM模型基础 HMM模型使用 初识EM算法 EM算法是一种求解含有隐变量的概率模型参数的迭代算法。该算法通过交替进行两个步骤&#xff1a;E步骤和M步骤&#xff0c;从而不断逼近模型的最优参数值。EM算法也称期望最大化算法&#xff0c;它是一个基…

机器学习——流形学习

流形学习是一种在机器学习领域中用于理解和分析数据的技术。它的核心思想是&#xff0c;尽管我们通常将数据表示为高维空间中的向量&#xff0c;但实际上数据可能具有较低维度的内在结构&#xff0c;这种结构被称为流形。流形学习的目标是发现并利用数据的这种潜在结构&#xf…

H12-821_28

28.如图所示,在一个纯IPv6环境中,若想实现PC1与PC2之间的通信,下列哪组地址可以分别配置在PC1与P2上 A.2001:FDC:1/64 2001:FDC::2/64 B.2001:FDC::1/64 2001:FDC1::2/64 C.FD00:1AC0:872E::1/64 FD00:2BE1:2320::1/64 D.FE80::1/64 FE80::2/64 答案&#xff1a;B 注释&…

图数据库 之 Neo4j - 背景介绍(1)

引言 Neo4j是一种高性能的图数据库&#xff0c;它专门设计用于存储、管理和查询大规模的图数据。与传统的关系型数据库不同&#xff0c;Neo4j以图的形式存储数据&#xff0c;其中节点表示实体&#xff0c;边表示实体之间的关系。这种图数据模型非常适合表示复杂的关系和连接。…

Termux配置安卓编译环境

前言 Termux安装后&#xff0c;就相当于把手机变成了一台Linux服务器&#xff0c;而且现在手机卡通常是能拿到ipv6公网地址的&#xff0c;所以&#xff0c;这个服务器能干啥&#xff1f; 编程搭建网站跑脚本 本文讲述的就是怎么在Termux搭建安卓编译环境&#xff0c;实现手机…

GraphicsMagick 的 OpenCL 开发记录(三十二)

文章目录 如何写ScaleImage()的硬件加速函数&#xff08;六&#xff09; <2022-04-27 周三> 如何写ScaleImage()的硬件加速函数&#xff08;六&#xff09; 不管什么事儿看来都怕琢磨&#xff0c;如果连做梦都能梦到你正在琢磨的事儿&#xff0c;估计离成功也就不远了。…

c++之说_12|模板

关于模板&#xff0c;至少我们要先了解几个概念 一&#xff1a;函数模板 二&#xff1a;类模板 三&#xff1a;模板特化 四&#xff1a;形参参数包 模板覆盖的东西太多 我目前也不了解太多 函数模板 语法 template<typename 类型名,typename 类型名,typename ...多参…