无服务器 自建短链服务 Url-Shorten-Worker 页面缓存曾经记录的短链接 localStorage

源码 GitHub: https://github.com/crazypeace/Url-Shorten-Worker

搭建教程: https://zelikk.blogspot.com/2022/07/url-shorten-worker-hide-tutorial.html

效果:

不同的浏览器页面，缓存不互通。这样，不同的使用者互相之间不知道用本服务创建了什么短链。

方案:

当成功生成短链时，将短链与原链接保存到浏览器缓存 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的函数，并在页面上做了一个按钮调用它。