白嫖worker 自建短链服务 Url-Shorten-Worker 页面缓存曾经记录的短链接 localStorage
效果:
不同的浏览器页面，缓存不互通。这样，不同的使用者互相之间不知道用本服务创建了什么短链。
方案:
当成功生成短链时，将短链与原链接保存到浏览器缓存 localStorage。
当打开此页面时，加载浏览器缓存 localStorage。
此 浏览器缓存 localStorage 为持久化保存的数据，关闭页面后还是保存在浏览器所在的机器上。
参考:
JS增加页面元素
https://blog.csdn.net/weixin_39961943/article/details/110746052
JS删除页面元素
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild
操作浏览器缓存localStorage
http://caibaojian.com/localstorage-sessionstorage.html
具体实施:
在main.js中
// 成功生成短链
if (res.status == "200") {
let keyShortURL = window.location.host + res.key;
let valueLongURL = document.querySelector("#longURL").value;
// save to localStorage
localStorage.setItem(keyShortURL, valueLongURL);
// add to urlList on the page
let urlList = document.querySelector("#urlList")
let child = document.createElement('li')
let text = document.createTextNode(keyShortURL + " " + valueLongURL)
child.appendChild(text)
urlList.append(child)
}新增一个load.js
定义了加载 localStorage 显示在页面上的函数。并且在末尾调用了一下。达到页面显示完后加载 localStorage 的效果。
考虑到如果服务重新部署，或者清空KV，会导致 localStorage 中保存的数据实际上在KV中并不存在。在load.js中写了一个清除localStorage的函数，并在页面上做了一个按钮调用它。
博文
