封装setItem 和 getItem 本地存储
store.js 文件 按需导出setItem 和 getItem 函数 ;在utils文件里面 ;

export const setItem = (key, value) => {
// 复杂数据需要序列化
if (typeof value === "object") {
localStorage.setItem(key, JSON.stringify(value));
} else {
// 简单数据直接i存储
localStorage.setItem(key, value);
// localStorage.setItem(key, JSON.stringify(value));
}
};
// 如果有字符串没有序列化 就去反序列化 会报错
export const getItem = (key) => {
const data = localStorage.getItem(key);
try {
// 报错说明data是一个没有经过序列化的数据,也就不需要反序列化了
return JSON.parse(data);
} catch (err) {
// 报错说明 data 是普通数据 取出来直接返回即可不需要反序列化操作
return data;
}
};
封装setItem 和 getItem 本地存储的更多相关文章
- 本地存储localStorage以及它的封装接口store.js的使用
本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布 0 推荐 9 收藏 ...
- 无痕模式下 this.StorageManager.setItem) 本地存储丢失
在无痕模式下,存的this.StorageManager.setItem("recharge", JSON.stringify(recharge))本地存储会丢失,所以我们改成使用 ...
- htm5本地存储方案——websql的封装
一.websql 简介 在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的 ...
- HTML5 学习总结(三)——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- Javascript本地存储小结
前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...
- HTML5 学习笔记(三)——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
- (转)Javascript本地存储小结
转自:https://i.cnblogs.com/EditPosts.aspx?opt=1 以下是原文: 1. 各种存储方案的简单对比 Cookies:浏览器均支持,容量为4KB UserData:仅 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5 ——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
- HTML5 LocalStorage 本地存储的用法
本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...
随机推荐
- Jmeter参数化5-JSON提取器
后置处理器[JSON提取器] ,一般放于请求接口下面,用于获取接口返回数据里面的json参数值 1.以下json为例,接口返回的json结果有多组数据.我们要取出purOrderNo值 2.在jmet ...
- PEP 703作者给出的一种no-GIL的实现——python3.9的nogil版本
PEP 703的内容是什么,意义又是什么呢? 可以说python的官方接受的no-GIL提议的PEP就是PEP 703给出的,如果GIL帧的从python中移除那么可以说对整个python生态圈将有着 ...
- Redis源码安装(Linux环境)
下载源码: wget https://download.redis.io/redis-stable.tar.gz 解压: tar -xzvf redis-stable.tar.gz 编译&安装 ...
- 【转载】 【Java分享客栈】我曾经的两个Java老师一个找不到工作了一个被迫转行了
本文作者: 福隆苑居士 本文链接: https://www.cnblogs.com/fulongyuanjushi/p/16182465.html 版权声明: 本博客所有文章除特别声明外,均采用 ...
- Odd and Even Zeroes 题解
前言 题目链接:洛谷:UVA. 题目简述 定义 \(\operatorname{count}(num)\) 表示 \(num\) 末尾 \(0\) 的个数.给出 \(n\)(\(n \leq 10^{ ...
- MySQL 优化慢查询
查询以SELECT 语句的形式执行数据库中的所有查找操作.调整这些语句是重中之重,无论是实现动态网页的亚秒响应时间,还是缩短数小时生成大量夜间报告的时间. 此外SELECT语句,进行查询调谐技术也适用 ...
- SMU Summer 2024 Contest Round 7
SMU Summer 2024 Contest Round 7 Make Equal With Mod 题意 给定一个长度为 \(n\) 的数列 \(a\).你可以执行若干次操作,每次操作选择一个大于 ...
- 如何在 Recovery 中启用应用
如果因为禁用了某个应用手机无法开机,那么你需要这个方法来救命 https://xdaforums.com/t/enable-or-disable-apps-directly-from-the-file ...
- csv导入导出组件jcsv
jcsv 介绍 jcsv一个简单的.轻量级的csv导入.导出库,相对于opencsv与javacsv,jcsv侧重于导入导出,包括导入校验.导出模板等. 源代码地址:https://gitee.com ...
- 模板链表类的扩展(QListEx<T>)
以前写的链表都是比较简单的,插入节点是在头节点上,所以循环链表时都是从最后一个数据往前找的,给人的感觉是倒着的, 今天写一个在链表尾部插入数据 1.链表节点类的定义 /链表节点类 template & ...