封装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 ...
随机推荐
- vue3 + ts 中出现 类型“typeof import(".........../node_modules/vue/dist/vue")”的参数不能赋给类型“Component<any, any, any, ComputedOptions, MethodOptions>”的参数。
错误示例截图 解决方法 修改shims-vue.d.ts中的内容 declare module "*.vue" { import { defineComponent } from ...
- 【Java】 Springboot+Vue 大文件断点续传
同事在重构老系统的项目时用到了这种大文件上传 第一篇文章是简书的这个: https://www.jianshu.com/p/b59d7dee15a6 是夏大佬写的vue-uploader组件: htt ...
- 【H5】04 建立超链接
摘自: https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks 超链接 ...
- python性能分析器:cProfile
代码: (1) import cProfile import re cProfile.run('re.compile("foo|bar")') 运行结果: (2) import c ...
- mujoco安装报错:mujoco_py/gl/eglplatform.h:99:10: fatal error: X11/Xlib.h: 没有那个文件或目录
安装mujoco报错: mujoco_py/gl/eglplatform.h:99:10: fatal error: X11/Xlib.h: 没有那个文件或目录 修复方法: sudo apt inst ...
- git的快速入门(含常用指令)
目录 概念 什么是git git与GitHub有什么区别 提交.仓库.分支 git的使用 从GitHub上下载别人的代码 直接将代码下载到本地 克隆仓库获取代码 将自己的代码上传到GitHub 本文拟 ...
- CH03_布局
第3章:布局 本章目标 理解布局的原则 理解布局的过程 理解布局的容器 掌握各类布局容器的运用 理解 WPF 中的布局 WPF 布局原则 WPF 窗口只能包含单个元素.为在WPF 窗口中放置多个元 ...
- 火山引擎ByteHouse助力车企实现高性能数据分析
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群. 新能源汽车市场正在迎来飞速发展时期.根据 IDC 预测,中国乘用车市场中,新能源车市场规模将在2028年超过 ...
- 使用C#爬取快手作者主页,并下载视频/图集
最近发现一些快手的作者,作品还不错,出于学习研究的目的,决定看一下怎么爬取数据.现在网上有一些爬虫工具,不过大部分都失效了,或者不开源.于是自己就写了一个小工具.先看一下成果: 软件只需要填写作者ui ...
- CMake构建学习笔记6-giflib库的构建
前面构建的zlib.libpng.libjpeg和libtiff都提供了CMakeList.txt文件,因此都可以通过CMake进行构建.不过有的依赖库是并没有CMakeList.txt文件,也就是官 ...