add: 添加暂存sql功能

[htfc786]

add: 添加暂存sql功能

在使用网站时，sql老是回到初始状态，我希望他可以保存，所以研究了一下源码，实现了

sql代码数据存在localStorage中，关闭页面不丢失

不过有一个问题，只有用户点击确定按钮之后代码才会保存，不过我觉得也没问题，用户点击确定代表用户写完代码了，再保存

回来我有时间研究一下，看看如何实现实时保存

由于本人第一次使用typescript，照葫芦画瓢写出来了，过了编辑器的的代码检查，应该没问题，

本人只有14岁，并没有专门学过这个，所以可能写的不是很好，希望大佬指点，感谢！

部分思路参考：https://www.bilibili.com/video/BV18T4y1z7zb/?spm_id_from=333.999.0.0

最后感谢鱼皮开源这个网站！

[cq2021-coder]

几……几岁？🐮🐮🐮🐮

[wawayes]

14...14岁???大佬

[htfc786]

鱼皮大佬您好，不知道是不是有什么不对的地方，您才没合并代码，请问我这样写代码可以吗？

[liyupi]

鱼皮大佬您好，不知道是不是有什么不对的地方，您才没合并代码，请问我这样写代码可以吗？

因为比较忙没有及时回复哈，抱歉。跟另外一个提交的建议是一样的：

首先代码写的还是很不错的，能想到把 saveCode 相关的增删改查抽离成一个独立文件很好。

本项目其实使用了 pinia 来做全局的状态管理，并使用 pinia-plugin-persistedstate 插件实现了 localStorage 的自动加载和同步，可以重点关注这段代码 ：https://github.com/liyupi/sql-mother/blob/3ad8917536d40308556d2781fcb48951ff4e7834/src/core/globalStore.ts#L17C1-L27C5 。期待改进

[htfc786]

十分感谢鱼皮大佬的回复，我会去改进的，我会尝试去研究一下pinia，之前一直都用localStorage存储信息，没用过。。。。看起来和vuex一样，感觉很高端的样子，我是第一次用

[htfc786]

不过这个东西好像还挺方便的，看了一下，把我写的saveCodeStore.ts那些增删改查换成pinia的defineStore，然后基本上在把SqlEditor.vue我写的那些替换成store提供的就可以了吧。。。

不过有一个问题：只要store的saveCode发生更改，就会触发watchEffect，就会重新初始化然后更新成默认的，然后用户原本写的就会发生改变，其他的还好，尤其是关闭功能，saveCode自己没了，代码直接变成默认的，这个原因我知道，就是saveCode发生改变，触发watchEffect事件，正在想办法解决。。。

十分感谢鱼皮大佬的回复！

[htfc786]

鱼皮大佬您好，我现在已经把代码改成pinia版了，不过由于我是第一次使用pinia之类的框架，可能会有问题，都是照着网上的文章做的。。。

顺便实现了一下我说的那个自动保存

但是我觉得可能会有一些问题，但是我不确定：

1. pinia相关的变量操作有问题，不知道会不会需要有保存问题，不过pinia好像会自动操作保存
2. SqlEditor.vue文件64-81行，我添加了一个变量，记录是否初始化过，代码只能初始化一次，不知道会不会有影响
3. SqlEditor.vue文件159-165行，自动保存，我测试是只要用户输入，每输入一个字母，这个方法就会被执行，不知道会不会有性能问题，要不要加个节流之类的

还有一个问题，就是我并不会使用git合并代码，怕把我写的代码合并没了，您昨天新提交的代码我这里没有，如果我的代码无法合并，请您评论，我会重新把最新合并的代码传上来

参考文章：

• https://blog.csdn.net/w1311004532/article/details/128305930
• https://blog.csdn.net/hpukevin/article/details/126844196
• https://zhuanlan.zhihu.com/p/533233367
• https://juejin.cn/post/6986847203885056036

另外，另一个提交(#24)就请您检查完这个提交pinia使用无误之后我在做，以免我写了半天都是错的

最后再次感谢鱼皮的回复！

[htfc786]

还有感觉使用pinia之后会有一些问题，不过如果不计较那点存储空间就无所谓

我发现他保存的是一个json的字符串

{saveCode: "-- 请在此处输入 SQL↵select * from student", isSaveCode: true}

这样就有一些问题，

如果用第一种我自己写的方法，就不会有一些json的“多余”部分，为什么说“多余”呢，比如{saveCode: "", isSaveCode: }，这些如果用我自己写的方法实现就不会出现

再比如，因为如果用户关闭功能，localStorage中就会存储如下内容，另外还有一个saveCode的key

{"saveCode":"","isSaveCode":false}

这种情况下，原来我实现的方案中saveCode已经被我删了，只要存一个isSaveCode的key，和false的value就可以了

这样对比就比原来多存东西了

请问就以上问题有什么优化方案吗？

当然，我承认如果不计较那点存储空间就无所谓，但是我可不想让市面上的应用都变从某款“小而美”的app一样

不过pinia是真的方便

最后感谢鱼皮的解答！

[liyupi]

还有感觉使用pinia之后会有一些问题，不过如果不计较那点存储空间就无所谓

我发现他保存的是一个json的字符串

{saveCode: "-- 请在此处输入 SQL↵select * from student", isSaveCode: true}

这样就有一些问题，

如果用第一种我自己写的方法，就不会有一些json的“多余”部分，为什么说“多余”呢，比如{saveCode: "", isSaveCode: }，这些如果用我自己写的方法实现就不会出现

再比如，因为如果用户关闭功能，localStorage中就会存储如下内容，另外还有一个saveCode的key

{"saveCode":"","isSaveCode":false}

这种情况下，原来我实现的方案中saveCode已经被我删了，只要存一个isSaveCode的key，和false的value就可以了

这样对比就比原来多存东西了

请问就以上问题有什么优化方案吗？

当然，我承认如果不计较那点存储空间就无所谓，但是我可不想让市面上的应用都变从某款“小而美”的app一样

不过pinia是真的方便

最后感谢鱼皮的解答！

首先你节约存储空间的意识是非常好的，但是回归到这个项目来说，一个 key 的大小几乎可以忽略不计，这种时候就需要考虑实现项目的时间成本了。如果时间足够，你可以把这个 key 从 json 中清除掉，下次再重新设置；但很多时候，我们可以把这些小的细节放到项目完善后慢慢优化~

[htfc786]

感谢鱼皮大佬的回复，那么请问，我这个新提交的代码有什么问题吗？ https://github.com/liyupi/sql-mother/pull/21/commits/dfea94399bf160879bba06a295049ca8340b1e28

我应该都把存储改成pinia版了

[liyupi]

感谢鱼皮大佬的回复，那么请问，我这个新提交的代码有什么问题吗？ dfea943

我应该都把存储改成pinia版了

看下上面的评论哈

[htfc786]

感谢鱼皮大佬的回复，那么请问，我这个新提交的代码有什么问题吗？ dfea943 我应该都把存储改成pinia版了

看下上面的评论哈

请问大佬，如何查看评论？我找了半天都没有啊。。。

[htfc786]

update 添加手动加载按钮

鱼皮大佬您好，手动加载按钮已经加好了

不过手动加载按钮难免会和自动保存有一定的冲突，因为一开始加载的是初始化的那个代码，而自动保存就会把这个初始化的代码存回去，这样再点击手动加载按钮的时候，加载的就是刚才存回去的代码了

我采用了一个办法，就是显示初始化代码的时候，把自动保存关掉，可是这样就会有一个问题：什么时候打开自动保存？

我采用的是加载完之后立即打开。

可是这样又会有问题了，如果用户这时候，不小心在上面打了个字母，保存的内容瞬间改变，之后用户点击按钮，加载的就会是刚才用户更改的内容了而不是原来的内容了。。。。

所以我感觉这会很矛盾，还不如自动加载

我在页面底下添加了几个开关，让用户选择是否自动加载内容

还有就是上面评论的那个思路，我实现了，用 watch 的那个，因为原来用的 watchEffect 里面的值一改变，函数就会被重新运行，我实在无法解决这个问题，所以就改了。我测了一下，无bug，不知道会有什么藏得更深的问题

差点忘了，还有一点有问题，就是重新开启保存代码时，代码不会自动保存一遍，这个是我的问题，我到现在还没有研究明白 vue3 setup 下如何获取到 this.$refs，我是想在上面设一个ref='xxx'，然后来在 IndexPage 获取到 SqlEditor 内部的代码数据

这就是我能想到的几个问题了，希望鱼皮大佬指点，感谢(o^^o)！

最后还是要感谢鱼皮开源此网站！

[htfc786]

鱼皮大佬您好，上次把代码改好，为什么您一个多月都没有回复我，请问我的代码哪里有问题？

[htfc786]

鱼皮大佬您好，我期中考试都完了，您怎么还没回我？这个代码具体有什么问题啊？那个。。。我感觉这个代码暂存功能也应该把信息存在源代码里已经有了的那个Store里了吧？怕您看不见@一下您 @liyupi

[htfc786]

@liyupi 鱼皮大佬您好，都12月了您怎么还不回复？我的代码到底有什么问题