封装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 ...
随机推荐
- 2024-07-31:用go语言,给定两个正整数数组arr1和arr2,我们要找到属于arr1的整数x和属于arr2的整数y组成的所有数对(x, y)中,具有最长公共前缀的长度。 公共前缀是指两个数的
2024-07-31:用go语言,给定两个正整数数组arr1和arr2,我们要找到属于arr1的整数x和属于arr2的整数y组成的所有数对(x, y)中,具有最长公共前缀的长度. 公共前缀是指两个数的 ...
- 【Java】项目采用的设计模式案例
先说一下业务需要: 做电竞酒店后台系统,第一期功能有一个服务申请的消息通知功能 就是酒店用户在小程序点击服务功能,可以在后台这边查到用户的服务需要 原本设计是只需要一张表存储这些消息,但是考虑设计是S ...
- ubuntu编译软件报错:fatal error: libnet.h: No such file or directory
参考: https://blog.csdn.net/wuyou1995/article/details/104742326/ ------------------------------------- ...
- Floyd判联通(传递闭包) & poj1049 sorting it all out
Floyd判联通(传递闭包) Floyd传递闭包顾名思义就是把判最短路的代码替换成了判是否连通的代码,它可以用来判断图中两点是否连通.板子大概是这个样的: for(int k=1; k<=n; ...
- JavaScript 事件循环竟还能这样玩!
JavaScript 是一种单线程的编程语言,这意味着它一次只能执行一个任务.为了能够处理异步操作,JavaScript 使用了一种称为事件循环(Event Loop)的机制. 本文将深入探讨事件循环 ...
- k8s中controller-runtime并发Reconcile分析
§ 0x01 起因 开发控制器时,团队内一直在讨论是否需要为单个控制器对象添加并发控制(即加锁),最终把 controller-runtime 框架中并发数改为1,同时启用了 k8s 的 leader ...
- AOP(代理模式)
利用特性Attribute+反射+代理类实现AOP 一.定义自定义特性 /// <summary> /// 自定义特性,方法执行前调用 /// </summary> publi ...
- ubuntu中sshd_config配置文件不存在
sshd_config配置文件不存在 导致外部无法连接ssh 解决方案: 1.完全卸载 sudo apt-get remove openssh-server openssh-client --purg ...
- SpringMVC:SpringMVC执行流程
目录 SpringMVC常用组件 DispatcherServlet初始化过程 ①初始化WebApplicationContext ②创建WebApplicationContext ③Dispatch ...
- Cookie的secure属性引起循环登录问题分析及解决方案
作者:来自 vivo 互联网服务器团队- Wang Fei 单点登录作为公共组件,在各个公司内部被各个系统所广泛使用,但是在使用过程中我们会遇到各种各样的问题,其中循环登录问题就是一个比较经典的问题. ...