vue pinia sessionstorage 的坑

默认的配置是开始 localStorage

如果用 sessionstorage 则发现数据存储不上 ,是因为缺少了序列化和反序列化

import { parse, stringify } from 'zipson'

export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
} return { count, increment }
},{
{
// 开启数据持久化
persist: {
storage: sessionStorage,
serializer: {
deserialize: parse, //JSON.parse
serialize: stringify//JSON.stringify
}
}
// ...省略
}
})

vue pinia sessionstorage 数据存储不上的原因的更多相关文章

  1. 【Android开发日记】之入门篇(七)——Android数据存储(上)

    在讲解Android的数据源组件——ContentProvider之前我觉得很有必要先弄清楚Android的数据结构. 数据和程序是应用构成的两个核心要素,数据存储永远是应用开发中最重要的主题之一,也 ...

  2. 第十一章:Android数据存储(上)

    数据和程序是应用构成的两个核心要素,数据存储永远是应用开发中最重要的主题之一,也是开发平台必须提供的基础功能.不光是在Android平台上,在其他的平台上,数据的存储永远是不可缺少的一块.Androi ...

  3. localStorage和sessionStorage数据存储

    var arr=[]; for(var i=0;i<4;i++){ arr[i]=i+i; } console.log(arr.toString()); //将json数据转化为字符串 var ...

  4. Vue页面间传值,以及客户端数据存储

    初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值 如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...

  5. 数据存储之Web存储(sessionStorage localStorage globalStorage )

    Web Storage 两个目标 提供一种在cookie之外的存储会话守数据的途径 提供一种存储大量可以跨会话存在的数据机制 最初的Web Storage规范包含两个对象 sessionStorage ...

  6. 循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储

    在我们一些系统里面,有时候会需要一些让用户自定义的数据信息,一般这些可以使用扩展JSON进行存储,不过每个业务表的显示项目可能不一样,因此需要根据不同的表单进行设计,然后进行对应的数据存储.本篇随笔结 ...

  7. 纯Vue实现网页日常任务清单小功能(数据存储在浏览器)

    任务清单可以极大提高我们的工作效率.哪些事情办了.哪些事情代办.哪些是紧急需要办的事情等等. 在组件化编码实战3的基础上进一步改进.将原先的数据保存的浏览器中.就可以做到关闭网页也不会丢失数据的情况 ...

  8. Ubuntu上更改MySQL数据库数据存储目录

    之前写过一篇博客"MySQL更改数据库数据存储目录",当时的测试环境是RHEL和CentOS,谁想最近在Ubuntu下面更改MySQL数据库数据存储目录时遇到了之前未遇到的问题,之 ...

  9. python上数据存储 .h5格式或者h5py

    最近在做城市计算的项目,数据文件是以.h5的格式存储的,总结下其用法和特点 来自百度百科的简介: HDF(Hierarchical Data Format),可以存储不同类型的图像和数码数据的文件格式 ...

  10. sessionstorage中存储JSON数据

    在web开发时,可能经常会用到sessionstorage存储数据,存储单个字符串数据变量时并不困难 var str = 'This is a string'; sessionstorage.setI ...

随机推荐

  1. gin 使用 jwt

    作用 JWT 的主要作用是方便客戶端與伺服器之間的身份驗證. 使用JWT 可以在不需要每次登入的情況下,在客戶端與伺服器之間安全地傳遞封裝身份信息. 它還可以用於許多其他用途,例如串接多個服務,並將數 ...

  2. C++笔记(13)数组的引用和引用的数组

    数组的引用 数组有二个特性,影响作用在数组上的函数:一是不能复制数组,二是使用数组名时, 数组名会自动指向其第一个元素的指针. 因为不能复制,所以无法编写使用数组类型的形参,数组会自动转化为指针.比如 ...

  3. .NET5 IIS ASP.NET CORE 部署时 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure

    .NET5 IIS ASP.NET CORE 部署时 HTTP Error 502.5 - ANCM Out-Of-Process Startup Failure 部署机器只安装了dotnet-hos ...

  4. Python 潮流周刊#56:NumPy 2.0 里更快速的字符串函数(摘要)

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  5. 漏洞复现之CVE-2012-1823(PHP-CGI远程代码执行)

    关于CGI知识点 `CGI模式下的参数: -c 指定php.ini文件的位置 -n 不要加载php.ini文件 -d 指定配置项 -b 启动fastcgi进程 -s 显示文件源码 -T 执行指定次该文 ...

  6. golang如何使用指针灵活操作内存?unsafe包原理解析

    Hi 你好,我是k哥.一个大厂工作6年,还在继续搬砖的后端程序员. 我们都知道,C/C++提供了强大的万能指针void*,任何类型的指针都可以和万能指针相互转换.并且指针还可以进行加减等算数操作.那么 ...

  7. 【vue】利用输入框搜索过滤来选择列表

    方法1 <div id="app"> <input type="text" @input="handleInput()" ...

  8. ClickHouse特性及底层存储原理

    ClickHouse的特性 ClickHouse是一款MPP架构的列式存储数据库,但MPP和列式存储并不是什么"稀罕"的设计.拥有类似架构的其他数据库产品也有很多,但是为什么偏偏只 ...

  9. php不使用Office包实现上万条数据导出表格

    经过上传客户要求主副表迁出,又提出可以将某张表的数据导出excel,听着很简单,实际看数据表发现上万条数据,并且需要关联表查询相关字段,导出的表格才可以被客户看明白. 要是使用office包目前后台内 ...

  10. .NET中使用RabbitMQ延时队列和死信队列

    RabbitMQ延时队列和死信队列 延时队列和死信队列 延时队列是RabbitMQ中的一种特殊队列,它可以在消息到达队列后延迟一段时间再被消费. 延时队列的实现原理是通过使用消息的过期时间和死信队列来 ...