无服务器 自建短链服务 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的函数,并在页面上做了一个按钮调用它。


评论

The Hotest in Last 30 Days

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io