本地存储

本地存储分为:

  • 永久存储
    localStorage数据储存在浏览器,页面关闭后数据仍然存在,多数使用在用户自动登录; 客户端保存数据方面
  • 临时存储
    sessionStorage 数据仅临时存储,页面关闭时数据自动删除,多用于安全性使用较高的地方
    本地存储调用者必须统一
    例如:临时存储的信息无法用永久存储找到

    保存数据: setItem ( key , value );
    localStorage.setItem( "pass" , value);
    获取数据: getItem( key );
    localStorage.getItem( "pass" );
    删除数据: removeItem( key );删除对应数据/clear( );删除所有数据
    localStorage.removeItem( "pass" );

获取本地存储数据:

方法1for (var i = 0 ; i < localStorage.length ; i++) {
	console.log(localStorage.key(i))
}
方法2//for(变量 in 对象){}
for(var k in b){
    console.log(b[k]);
   }
### 本地存储技术的概念与实现 #### 什么是本地存储本地存储是一种允许Web应用程序在用户的设备上保存数据的技术。它提供了比传统Cookie更强大、灵活的功能,能够持久化存储大量数据而不影响页面性能[^1]。 #### 主要的本地存储方式 目前主流的前端框架和技术栈支持多种本地存储方案,其中包括但不限于: - **LocalStorage**: 提供了一种简单的键值对存储机制,适合长期存储少量数据。它的特点是即使浏览器关闭后仍然保留数据,直到手动清除为止。 - **SessionStorage**: 类似于LocalStorage,但它仅限于当前会话期间有效;一旦窗口或标签页被关闭,则该存储中的数据会被销毁。 - **IndexedDB**: 是一种更为复杂的客户端数据库解决方案,适用于需要处理更大规模结构化数据的应用场景。 对于UniApp开发环境而言,主要依赖`localStorage`以及其封装后的API来完成基本的数据操作需求[^1]。 #### 实现数据存储的方法 以下是基于JavaScript语法,在UniApp项目里利用LocalStorage进行简单数据写入读取的例子: ```javascript // 存储单条记录到 localStorage 中 function saveData(key, value){ uni.setStorageSync(key,value); } // 获取指定 key 对应的内容 function getData(key){ return uni.getStorageSync(key); } ``` 上述代码片段展示了如何定义两个函数分别用于向LocalStorage添加新项(`saveData`) 和检索已存在的项 (`getData`) 。这里采用了同步版本的操作接口 `setStorageSync()` 及 `getStorageSync()`, 它们可以直接返回结果而无需等待回调执行完毕[^1]. 需要注意的是,尽管这些方法非常方便易用,但由于它们存在一定的局限性——比如容量上限较低(通常为5MB),所以当面对较大数据量或者复杂查询逻辑时可能显得力不从心。此时可以考虑采用其他高级别的替代品如 IndexedDB 或者 SQLite 插件等扩展功能更强的选择[^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值