小白询问ChatGPT4，成功改造TodoList：把本地存储的localStorage修改成PHP+Redis

先讲一下我的需求：

我希望能在手机上有个临时记录我的todo，需要快速处理的todo，让我能够随手记录，然后同步到我的电脑端。

iphone自带的就算了，无法简单实现同步，有技术门槛。

这样的app不少，但是简约、有设计感的不多。滴答清单、todoist那些功能太全面，不够简约。最后尝试过谷歌task、微软todo，风格是很简约，但是网络性能拉胯。

 

好了，下面是正文：

这里照搬的是：免费极简设计网页版Todo    https://www.ricocc.com/todo/

 

非常感谢原作者Rico。我很喜欢这个TodoList的设计和风格，但是可惜只能本地存储，我又不想使用微软的TODO，登录倒无所谓，但是微软TODO数据同步问题很大，常常卡壳，实在头痛，所以放弃。

我是菜鸟，只是刚好前段时间安装了Apache、PHP的一键安装包和Redis，

今天突然灵光一闪，能不能让AI帮我把这个网页弄成Redis存储呢？

说干就干，首先问AI有什么软件能把网页download下来，在AI的回答里选第一个，下载即用，才4MB，太好用了。

放到Apache的目录下，网页正常显示了，

接着，我发问了（其实是问了很多轮，最后合成下面这些句子，不一定能一次过，以下同）：

//我希望用php+redis来代替下面js代码里的localStorage，我已经在服务器端部署了Apache和redis，安装了PHP 的 Redis 扩展，请问下面的js要如何重写，php要如何写，不要使用Predis，请写出具体代码：
<script>
        // localStorage 存储数据
        var STORAGE_KEY = 'vue2.x-todo-tutorial';
        var todoStorage = {
            fetch: function () {
                var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
                todos.forEach(function (todo, index) {
                    todo.id = index;
                });
                todoStorage.uid = todos.length;
                return todos
            },
            sava: function (todos) {
                localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
            }
        }
    </script>

AI发给我两个PHP文件的代码，

我还有些担心无法运行，于是再次发问：请写一个php代码，测试你上面两个php是否能正确运行

好了，AI继续给我一个php代码，我马上测试，通过！

（中间有个小插曲，AI说这段php代码用上了curl，我让AI教我如何查看我是否已经安装了PHP的curl）

由于我是小白，我强制AI用上同步的代码，放弃异步的代码，因为异步需要改动的地方较多，需要懂得更高级的知识。

但是还是无法正常使用，怎么回事呢？

经过几次调试，发现 ai 自动把原来Rico代码里的sava 改成了save（也许是Rico留下的bug），于是我稍微改动一下，最终成功！

期间遇到问题，index（.id属性）经常会变化，十分苦恼，由于我是菜鸟，不太懂源代码里面的内容，由此我另立规则，我让ai帮我设置todo的内容（也即是.title属性）不能重复，这样就可以用title来代替id了。
如何及时同步网页端和手机端呢，我让ai设置每隔5秒重新下载一次todolist，由于redis足够快，而且我多端切换的频率没有太高，因此这个也是完全能满足需求的。
然后，我还让ai仿照Rico的样式，做了个置顶的按钮，添加功能函数，实现了可以把某个todo置顶，这样就很个性化定制了。

接着，我让AI在点击提交按钮后添加新 todo 并使视图滚动到最上方。这样在手机操作添加任务就很丝滑了。

再接着，添加了右键菜单，可以上移、下移、复制一条todo并置顶（相当于新增）。

而后，todo添加了三种背景颜色，根据自己的需要随意切换。

对了，还去掉了动画，当然，这个让视觉效果变差了，但是没办法，搞了很久也无法解决动画重复的问题，为了同步数据只能忍痛牺牲视觉效果。

……

ChatGPT让我很惊讶的一点就是，其实我问的问题已经不下一百条了，可是它仍然能知道我的上下文，那个置顶按钮就是ai从最前面的代码里翻出的属性和方法，我只能说太牛了，实在是帮上大忙了。

这下子我的网页端和手机端，都能用上这个私人订制的 Todo List了，谢谢Rico，谢谢AI。