封装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 ...
随机推荐
- (一)Vue 3 项目搭建
确保已安装 16.0 或更高版本的 Node.js,然后在命令行中运行以下命令: npm init vue@latest 这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工 ...
- 【Vue2】Computed 计算属性
计算属性在编写的时候是一个方法 但是在调用的时候作为属性使用 <!DOCTYPE html> <html lang="en"> <head> & ...
- 【SpringCloud】 Re01
简单理解 接口跨服务调用 说白了 就是原来只是调用一个接口就能得到资源,现在是调用两个或者更多接口,这些接口来自不同的服务 (从前端的角度来看依然只是调用这个接口,只是这个接口背后又去调用其他的接口了 ...
- pytorch-a2c-ppo-acktr-gail 算法代码
地址: https://github.com/ikostrikov/pytorch-a2c-ppo-acktr-gail
- tf.py_func的一些使用笔记——TensorFlow1.x
tensorflow.py_func是TensorFlow1.x版本下的函数,在TensorFlow.2.x已经不建议使用了,但是依然可以通过tf.compat.v1.py_func的方式来进行调用. ...
- QT中TreeWidget树控件的使用
关于Item Widgets中Tree Widget的使用方法! TreeWidget树控件的使用 创建列表头, 该控件有什么属性 QStringList header_list; header_li ...
- 使用Django-Channels实现websocket通信+大模型对话
前言 最近一直在做这个大模型项目,我选了 Django 作为框架(现在很多大模型应用都用的 FastAPI,不过我已经用习惯 Django 了) 之前使用 AspNetCore 作为后端的时候,我先后 ...
- Go 监控告警入门 Opentelemetry
前言 Opentelemetry 分布式链路跟踪( Distributed Tracing )的概念最早是由 Google 提出来的,发展至今技术已经比较成熟,也是有一些协议标准可以参考.目前在 Tr ...
- debian10环境安装rtpengine
操作系统 :debian 10.13_x64 rtpengine版本:10.5 最新的debian12环境可通过apt直接安装rtpengine,但工作中有时候还会涉及到debian10这样的老系统, ...
- EXlucas
\(EXLucas\) 扩展卢卡斯定理 ·题意 试求: \[C^{m}_n \mod P \ \ \ \ \ \ \ \ \ \ \ ( P \in N ^* ) \] 注意, \(P\) 非质数( ...