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 本地存储的更多相关文章

  1. 本地存储localStorage以及它的封装接口store.js的使用

    本地存储localStorage以及它的封装接口store.js的使用 sublime-text chrome javascript readyGo 2016年11月20日发布   0 推荐 9 收藏 ...

  2. 无痕模式下 this.StorageManager.setItem) 本地存储丢失

    在无痕模式下,存的this.StorageManager.setItem("recharge", JSON.stringify(recharge))本地存储会丢失,所以我们改成使用 ...

  3. htm5本地存储方案——websql的封装

    一.websql 简介   在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能来将原本必须保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序的性能,减轻了服务器端的 ...

  4. HTML5 学习总结(三)——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  5. Javascript本地存储小结

    前言 总括:详细讲述Cookie,LocalStorge,SesstionStorge的区别和用法. 人生如画,岁月如歌. 原文博客地址:Javascript本地存储小结 知乎专栏&& ...

  6. HTML5 学习笔记(三)——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  7. (转)Javascript本地存储小结

    转自:https://i.cnblogs.com/EditPosts.aspx?opt=1 以下是原文: 1. 各种存储方案的简单对比 Cookies:浏览器均支持,容量为4KB UserData:仅 ...

  8. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  9. HTML5 ——本地存储

    目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...

  10. HTML5 LocalStorage 本地存储的用法

    本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...

随机推荐

  1. nacos配置&gateway配置服务发现一直报500

    项目场景: 这两天不是一直在搞简化配置.使用公共配置.我的服务可以通过网关访问这几个任务嘛,也是不断地踩坑补知识才总算把这几个任务都搞好了,下面就是记录过程中遇到的问题. 使用公共配置 因为发现项目使 ...

  2. 【Server - 运维】更改腾讯云数据库参数设置

    购买的MySQL实例是一个屏蔽了后台设置的服务器: 默认大小写设置是使用严格区分的: 要设置忽略大小写,就要在my.cnf中更改配置参数 https://cloud.tencent.com/devel ...

  3. 什么是智慧城市(Smart City)?

    Smart City是一个常见的概念,但是这个东西,这个名词到底指代的是什么却一直搞不太清,于是就查了查资料,有了这篇blog. 参考: https://baijiahao.baidu.com/s?i ...

  4. centos7系统 通过编译安装gcc7.5.0

    背景: 现有的centos7 gcc的最高版本为4.8.5 项目需要升级到7.1.0以上 正常方式可以通过以下命令即可完成升级: $ sudo yum install centos-release-s ...

  5. Mysql 不用Json存储 List<Long>的方式

    public static void main(String[] args) { List<Long> idList = new ArrayList<>(); for (int ...

  6. odoo openErp 随笔

    环境: win7 x64 Python 2.7.18 nodejs pip: C:\> python --version C:\> pip --version C:\> cd \Co ...

  7. 在程序里面执行system(“cd /某个目录“),为什么路径切换不成功?

    粉丝提问: 彭老师,问下,在程序里面执行system("cd /某个目录"),这样会切换不成功,为啥呢 实例代码: 粉丝的疑惑是明明第10行执行了cd /media操作, 为什么1 ...

  8. 【YashanDB知识库】23.1.3.101版本创建物化视图coredump

    [标题]23.1.3.101版本创建物化视图coredump [问题分类]数据库错误 [关键词]YashanDB, 物化视图, coredump, dblink [问题描述]在23.1.3.101版本 ...

  9. 如何调用openai的TTS模型

    这是24年1月份写的了,调用代码大概率有变动,仅供参考. 1 什么是OpenAI的TTS模型 OpenAI的TTS模型是一种文本到语音(Text-to-Speech)模型,它可以将给定的文本转换为自然 ...

  10. 为什么MySQL 默认隔离级别是RR,又被阿里设置为RC

    我们知道,我们可以通过这个命令查看数据库当前的隔离级别,MySQL 默认隔离级别是RR. select @@tx_isolation; ANSI/ISO SQL定义的标准隔离级别有四种,从高到底依次为 ...