URL存储解锁数据管理的新思路,重新定义数据传输与共享(@vue/repl)
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。
近日,在了解 @vue/repl 相关内容,其通过 URL 进行数据存储,感觉思路惊奇,打开了新方式。
首先,通过 URL 存储最大的便利是:无需服务端且通过URL可以分享。
比如:通过 这个URL 即可获取到个人编写的内容。

下面和大家一起解读一下,尤大是如何实现的?
这里需要充分考虑了URL字符限制,所以增加了压缩。
源码解析
// 调用
import { ReplStore } from '@vue/repl'const store = new ReplStore({serializedState: location.hash.slice(1),// 其他配置项...
})
源码
if (serializedState) {// URL中有存储的数据const saved = JSON.parse(atou(serializedState))// 实现设置代码的逻辑for (const filename in saved) {setFile(files, filename, saved[filename])}
} else {// URL中没有存储的数据// 设置默认的代码setFile(files, defaultMainFile, welcomeCode)
}
这里调用了atou方法,用于解码数据,还有一个与之相对的utoa,用于编码数据。
// 借助vue3 watchEffect 实时响应,修改 URL
watchEffect(() => history.replaceState({}, '', store.serialize()))serialize() {const files = this.getFiles()const importMap = files[importMapFile]if (importMap) {// 其他处理逻辑}return '#' + utoa(JSON.stringify(files))}
整个过程的核心是使用了base64编码和压缩算法。在存储阶段,数据首先经过base64编码,然后使用zlib压缩算法进行压缩。压缩后的数据再转换为二进制字符串,最终使用btoa方法将二进制字符串编码为Base64字符串。而在读取阶段,则按照相反的过程进行解码和解压缩。
-
存储阶段:strToU8 => zlibSync => strFromU8 => btoa
-
读取阶段:atob => strToU8 => unzlibSync => strFromU8
读取是存储的一个逆向过程。压缩和解压缩使用了开源框架 fflate – 号称是目前最快、最小、最通用的纯 JavaScript压缩和解压库。
import { zlibSync, unzlibSync, strToU8, strFromU8 } from 'fflate'// 解码
export function atou(base64: string): string {const binary = atob(base64)// zlib header (x78), level 9 (xDA)if (binary.startsWith('\x78\xDA')) {const buffer = strToU8(binary, true)const unzipped = unzlibSync(buffer)return strFromU8(unzipped)}// old unicode hacks for backward compatibility// https://base64.guru/developers/javascript/examples/unicode-stringsreturn decodeURIComponent(escape(binary))
}// 编码
export function utoa(data: string): string {const buffer = strToU8(data)const zipped = zlibSync(buffer, { level: 9 })// 二个参数传了true,代表转换成二进制字符串,因为js内置的btoa和atob方法不支持Unicode字符串,而我们的代码内容显然不可能只使用ASCII的256个字符const binary = strFromU8(zipped, true)return btoa(binary)
}
btoa()方法可以将一个二进制字符串(例如,将字符串中的每一个字节都视为一个二进制数据字节)编码为 Base64 编码的 ASCII 字符串。
atob()对经过 base-64 编码的字符串进行解码。


let encodedData = window.btoa("Hello, world"); // 编码
let decodedData = window.atob(encodedData); // 解码
总结
通过这种方式,@vue/repl 实现了将数据存储在URL中的功能。这样做的好处是可以避免服务器的繁琐配置和费用,并且方便快捷地分享给其他人。
该插件支持 CodeMirror Editor、Monaco Editor 两款主流编辑器,如果大家项目中有需要代码编辑器的可以直接“借鉴使用”。
好的技术方案一定是根据场景来的!且通过阅读源码,我们可以获取到一写比较不错且小巧的开源库,如上述的 fflate。
相关文章:
URL存储解锁数据管理的新思路,重新定义数据传输与共享(@vue/repl)
Thinking系列,旨在利用10分钟的时间传达一种可落地的编程思想。 近日,在了解 vue/repl 相关内容,其通过 URL 进行数据存储,感觉思路惊奇,打开了新方式。 首先,通过 URL 存储最大的便利是:无需服…...
matlab程序中文乱码
不同版本的matlab共存在GBK(即,ANSI)和UTF-8两种编码方式,因此可能会出现乱码问题。 第一步:在matlab的命令行窗口输入指令,查看当前编码方式 feature(locale) 第二步:用Notepad打开文件&…...
【计算机视觉|语音分离】期望在嘈杂环境中聆听:一个用于语音分离的不依赖于讲话者的“音频-视觉模型”
本系列博文为深度学习/计算机视觉论文笔记,转载请注明出处 标题:Looking to Listen at the Cocktail Party: A Speaker-Independent Audio-Visual Model for Speech Separation 链接:Looking to listen at the cocktail party: a speaker-in…...
curl 介绍和使用
文章目录 一、介绍1.1 curl 介绍1.2 curl 参数介绍1.3 类似Curl的工具和库 二、使用2.1 curl 下载2.2 curl 示例用法2.3 curl命令使用digest方式验证用户 一、介绍 1.1 curl 介绍 官网:https://curl.se/GitHub源码:https://github.com/curl/curl Curl…...
5、VMWARE安装、MobaXterm SSH连接 、Ubuntu xrdp安装使用
以下是在VMware中安装Ubuntu 22.04的详细步骤: 下载Ubuntu 22.04镜像文件: 前往Ubuntu官方网站或其他可信来源,下载Ubuntu 22.04的镜像文件(.iso格式)。 创建虚拟机: 打开VMware Workstation软件…...
Docker dockerfile 案例:centos 支持 vim
创建一个 centos 容器,容器内默认是不支持使用 vim 指令的,只能使用 vi 指令。(附:Dockerfile 语法与指令) 但想在创建 centos 容器后就支持 vim 指令,需要自定义 centos,编写 dockerfile&…...
Git忽略已经提交过一次的文件 Git忽略文件
1、从未提交过的文件可以用.gitignore 也就是添加之后从来没有提交(commit)过的文件,可以使用.gitignore忽略该文件 该文件只能作用于未跟踪的文件(Untracked Files),也就是那些从来没有被 git 记录过…...
Scala项目找不到或无法加载主类
目录 1,出错背景2,分析与解决 1,出错背景 Scala项目无法创建scale和Java文件。项目没有报错,但执行时项目总是找不到项目下的类,报错信息如下所示: 错误: 找不到或无法加载主类 com.my.memTestCheck但该类…...
八大排序算法--选择排序(动图理解)
选择排序 算法思路 每一次从待排序的数据元素中选出最小(或最大)的一个元素,存放在序列的起始位置,直到全部待排序的数据元素排完 。 选择排序的步骤: 1>首先在未排序序列中找到最小(大)元素…...
6.s081(Fall 2022)Lab2: system calls
文章目录 前言其他篇章参考链接0. 前置准备1. System call tracing (moderate) 前言 好像没啥前言 其他篇章 环境搭建 Lab1:Utilities 参考链接 官网链接 xv6手册链接,这个挺重要的,建议做lab之前最好读一读。 xv6手册中文版,这是几位先…...
SAMBA 文件分享相关 笔记
目标说明 在Linux 安装Samba,然后在Windows端映射为网络硬盘 流程 Linux 端命令 apt install samba -y 默认情况下软件会询问是否迁移系统网络设置以搭建协议,选择迁移即可修改配置文件 vim /etc/samba/smb.conf Samba 的配置文件中会带一个名为 prin…...
Mr. Cappuccino的第53杯咖啡——Mybatis源码分析
Mybatis源码分析 Mybatis源码分析入口1. 读取配置文件总结 2. 解析配置文件核心代码(一)核心代码(二)分析parse()方法分析build()方法 总结 3. 获取SqlSession总结 4. 获取mapper代理对象总结 5. 使用mapper代理对象执行Sql语句二…...
修改文件格式(查看文件拓展名)
很多时候我们直接把txt文件重命名为xxx.c或者别的文件格式,文件类型依然会是txt,文件名并不会变成我们想要的xxx.c,而是xxx.c.txt,也就是下面这个样子 给大家介绍2种方法去解决这个问题 目录 1.另存为新格式 2.显示文件拓展名 1…...
利用鸿鹄可观测性监控Istio Ingress网关
一、需求描述 在上一篇《利用Vector和鸿鹄搭建微服务应用的可观测性平台》中,阐述了微服务的基本概念、优点及如何利用鸿鹄来处理分布式应用的日志。本文将进一步讨论微服务架构面临的问题、服务网格及鸿鹄处理Istio Gateway的独特优势。 1.1 微服务架构面临的挑战 …...
vscode 前端开发插件 2023
自己记录 安装vscode后必装插件 chinesegit 必装没啥可说 随时更新 1.CSS Navigation CTRL点击类名可跳转到对应样式位置。 如果是scss less的话。css peak插件无法生效 2.GitLens — Git supercharged 可以看到每一行的git提交记录。 3.Auto Rename Tag 可以同步更新…...
使用docker部署Wordpress
文章目录 1.创建网络2.创建volume存储3.拉取镜像4.创建mysql容器mysql修改密码 5.创建wordpress容器6.访问localhost:80就可以直接使用啦 1.创建网络 docker network create --subnet172.18.0.0/24 pro-net2.创建volume存储 # mysql 存储 docker volume create volume_mysql…...
7.31黄金最新行情走势分析及多空交易策略
近期有哪些消息面影响黄金走势?黄金多空该如何研判? 黄金消息面解析:上周有重磅数据美联储加息的消息,黄金受其影响波动比较频繁,总体空间40美金。但这个过程跌宕起伏。收线来看黄金在连续上涨三周后迎来一根小阴十…...
Spring框架——AOP注解方式
目录 Spring框架的AOP技术(注解方式) 通知类型 Spring框架的AOP技术(注解方式) 1. 步骤一:创建JavaWEB项目,引入具体的开发的jar包* 先引入Spring框架开发的基本开发包com.springsource.org.apache.commo…...
Java 日志(Logging)如何创建和捕获日志消息和文件
Java允许我们通过日志记录过程来创建和捕获日志消息和文件。 在Java中,日志记录需要框架和API。Java在java.util.logging程序包中具有内置的日志记录框架。 Java 日志组件 下图显示了Java Logging API(java.util.logging)的核心组件和指定…...
em3288 linux_4.19 lvds+tp调试
一、显示配置\rk3288_linux4.19\kernel\arch\arm\boot\dts\rk3288-evb-act8846.dtspanel {compatible "simple-panel";backlight <&backlight>;bus-format <MEDIA_BUS_FMT_RGB666_1X18>;enable-gpios <&gpio1 24 GPIO_ACTIVE_HIGH>;ena…...
网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
Prompt Tuning、P-Tuning、Prefix Tuning的区别
一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中,我们会遇到使用 java 调用 dll文件 的情况,此时大概率出现UnsatisfiedLinkError链接错误,原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用,结果 dll 未实现 JNI 协…...
【第二十一章 SDIO接口(SDIO)】
第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
k8s业务程序联调工具-KtConnect
概述 原理 工具作用是建立了一个从本地到集群的单向VPN,根据VPN原理,打通两个内网必然需要借助一个公共中继节点,ktconnect工具巧妙的利用k8s原生的portforward能力,简化了建立连接的过程,apiserver间接起到了中继节…...
九天毕昇深度学习平台 | 如何安装库?
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子: 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
