封装localStorage数据存取方法

最新推荐文章于 2024-08-19 15:26:53 发布
最新推荐文章于 2024-08-19 15:26:53 发布
阅读量428 收藏
点赞数
文章标签： json
原文链接：https://juejin.im/post/5aaf53e36fb9a028b86dd0c7
版权

title: 封装localStorage数据存取方法 date:2017年8月28日 12:33:51 tags: HTML categories: 教程 author: "JiaWei"

localStroages是HMTL5新型客户端数据存取新方式IE

欢迎收看饿了么系列 之 localStroage封装

  • window.localStorage

    • 读取： localStroage.getItem('key')
    • 储存： localStroage.setItem('key','value')
    • 兼容性： IE8+
    • 大小： 5M
    • 数据类型： String
    • 有效期： 永久
    • 在浏览器的隐私模式下面是不可读取且无法给爬虫抓取数据

  • 封装localStroage

    • getter saveToLocal(id,key,value){}
    • setter loadFromLocal(id,key,def){}

weixin_34403693
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QtQuick通过LocalStorage链接SQLite数据库，完成增删改查
zusi_csdn
06-02 2211
一、创建与链接LocalStorage官方给的说明：This is a singleton type for reading and writing to SQLite databases；链接调用的方法：object openDatabaseSync(string name, string version, string description, int estimated_size, jsob...
封装LocalStorage、SessionStorage方法
weixin_42723136的博客
04-11 863
/** Public methods for localStorage and sessionStorage Created by XuXiaochuan on 2021/04/26. / class Store { /* @function 构造函数 @param {Object} store window的存储对象（localstorage、sessionStorage） */ constructor(store) { // 检测是否支持localstorage if (!store) { r
localStorage的用法与封装
m0_45272038的博客
02-13 491
文章目录localStorage的用法在localstorage内定定义两个方法1. fetch(key) => 获取localStorage 中key 的记录 返回对象2. save(key,obj) => 保存 key 为 key对象 => localStorage localStorage的用法 let todos = [ { id:1, text:"哈哈" }, {
实现Storage，使得该对象为单例，并对localStorage进行封装设置值setItem(key,value)和getItem(key)
LuckXinXin的博客
05-16 261
var instance = null; class Storage { static getInstance() { if (!instance) { instance = new Storage(); } return instance; } setItem = (key, value) => localStorage.setItem(key, value), getItem = key => localStorage.getItem(ke
封装locaostorage
weixin_34370347的博客
07-14 124
1 const ls = localStorage 2 3 export default { 4 setItem(name, value) { 5 ls.setItem(name, JSON.stringify(value)) 6 }, 7 getItem(name) { 8 try { 9 return JSON.parse(ls.g...
本地存储方法之localStorage存储的使用
SuBaijiu的博客
11-27 4165
本地存储方法之localStorage存储的使用
本地存储模块封装 localstorage
weixin_46446028的博客
10-09 147
// 存数据 export const setItem = (key, val) => { if (typeof val === 'object') { JSON.stringify(val) } window.localStorage.setItem(key, val) } // 取数据 // 如果本地存储的是字符串,使用json.parse报错 // 可以用try..catch来捕获错误 export const getItem = (key) => { try {
vue使用二次封装存储localStorage
03-04
二次封装localStorage的目的是统一操作接口，避免在多个组件或服务中重复编写相同的存取逻辑，同时也便于添加额外的功能，如数据加密、过期提醒等。以下是一个简单的Vue localStorage封装示例： 1. 创建一个名为`...
localStorage的过期时间设置的方法详解
09-22
localStorage 提供了简单的API来存取数据： - `localStorage.setItem(key, value)`：设置指定`key`对应的数据值`value`。 - `localStorage.getItem(key)`：获取指定`key`对应的值。 - `localStorage.removeItem(key)...
使用Typescript编写更加易用的localStorage和sessionStorage的API
08-10
这个类中，`setItem`和`getItem`方法都使用了`JSON.stringify`和`JSON.parse`进行数据的序列化和反序列化，以适应`localStorage`的字符串存储需求。同时，通过类型注解，我们确保了在设置和获取值时的类型安全。 ...
cypress-localstorage-commands：使用localStorage方法扩展Cypress的cy命令。 允许在两次测试之间保留localStorage
02-06
赛普拉斯localStorage命令 用localStorage方法扩展Cypress的cy命令。 允许在测试之间保留localStorage并禁用localStorage。 问题所在 您想在赛普拉斯测试之间保留localStorage。 您要禁用localStorage来检查错误处理。 这个解决方案 该解决方案允许您通过赛普拉斯命令使用所有浏览器的localStorage方法，并在测试之间保留它。 它还允许模拟在浏览器中禁用localStorage。 安装 该模块是通过与节点捆绑在一起的npm分发的，应该作为项目的devDependencies之一安装： npm i --save-dev
一种更好的方法来使用localStorage和sessionStorage
08-11
2. **数据序列化与反序列化**: 由于`localStorage`和`sessionStorage`只能存储字符串，我们需要在存取复杂数据类型（如对象或数组）时进行序列化和反序列化。JSON是最常用的工具，因为JavaScript对象可以直接转换为...
yux-storage:yux-storage 是一个基于 HTML5 IndexedDB 封装的 Web 本地数据离线存储库
05-13
异步操作，在进行大量数据存取时不会阻塞应用程序。 适用场景 适用于复杂对象、经常需要序列化处理的数据操作，否则使用 localStorage 更加方便 快速开始 安装 直接在 获取 yux-storage.js （推荐） [removed]...
Qt5:QML:LocalStorage
云淡风轻
11-22 2431
简介LocalStorage是本地SQLite的数据库，程序关闭后仍存在，用于持久化数据。在windows 10中位于 C:\Users\用户\AppData\Local\QtProject\localstorage\QML\OfflineStorage\Databases C:\Users\ink\AppData\Local\localstorage\QML\OfflineStorage\Data
localstorage用法及拓展
m0_61701551的博客
07-21 2996
localstorage用法及拓展sessionStorage和cookie
QT本地存储演示
10-21 280
【代码】QT本地存储演示。
在localStorage中存取值的方法
weixin_43905830的博客
06-10 4252
在前端开发中，当我们重新加载页面时我们希望显示到上一次页面的数据，这时我们就要用到LocalStorage,将我们的数据保存到这里，退出页面时将数据保存，重新加载就直接取出我们的数据，下面用个实例来介绍下我们存取值的方法。 在一些购物app中我们点击不同的商家就会显示对应商家的基本信息，我们一般通过给每个商家的页面设定一个id，当我们访问某个商店时只要将对应的id返给后端，后端就会给我们对应的信息，下面我们就来实现下。 上代码 //假设我们的地址 http://localhost:8081/?id=1234
前端localStorage的存取
大石化鸟的博客
09-08 861
前端localStorage的存取
Python爬虫案例二：获取虎牙主播图片(动态网站)
最新发布
m0_74614835的博客
08-19 965
params不能写在__init__()里面，因为__init__()只执行一次，params是变化的。'iPageNo': '{}'.format(i), # i是字符串。print('ok 第{}张--{}'.format(self.no, name))1.异步数据（即先返回HTML，再返回目标的数据，只是触发了JSON请求），不在HTML中。os.mkdir('../虎牙')测试链接：https://live.huya.com/# 构造7页的params。2.不能刷新网页，直接翻页。
window.localStorage存取数据
03-29
LocalStorage 是 HTML5 标准中新加入的一项功能，它允许在浏览器端存储数据，并且在同一域名下的所有页面共享。LocalStorage 的数据是持久化的，即便关闭浏览器也不会丢失。 LocalStorage 的 API 比较简单，它提供了以下几个方法： 1. `localStorage.setItem(key, value)`：将键值对存储到 localStorage 中； 2. `localStorage.getItem(key)`：从 localStorage 中获取指定键的值； 3. `localStorage.removeItem(key)`：从 localStorage 中删除指定键的值； 4. `localStorage.clear()`：清空 localStorage 中的所有键值对。 示例代码： ```javascript // 存储数据 localStorage.setItem('name', '张三'); localStorage.setItem('age', '18'); // 获取数据 const name = localStorage.getItem('name'); const age = localStorage.getItem('age'); // 删除数据 localStorage.removeItem('name'); // 清空数据 localStorage.clear(); ``` 需要注意的是，LocalStorage 只能存储字符串类型的数据，如果要存储其他类型的数据，需要先将其转换为字符串类型，存储时再将其解析回来。比如： ```javascript // 存储对象 const user = { name: '张三', age: 18 }; localStorage.setItem('user', JSON.stringify(user)); // 获取对象 const userStr = localStorage.getItem('user'); const userObj = JSON.parse(userStr); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值