📅 最后修改于: 2023-12-03 15:06:57.104000 🧑 作者: Mango
在Web开发中，经常会需要收藏一些站点作为书签以方便访问。本篇文章将介绍如何使用Local Storage和JavaScript构建一个简单的站点书签应用程序。
Local Storage是一种浏览器存储方式，它允许我们在浏览器中存储数据并在页面重载后仍能访问这些数据。Local Storage提供了localStorage对象来访问浏览器中的存储数据。
下面是一个简单的站点书签应用程序，它能够实现站点收藏、查看和删除功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>站点书签应用程序</title>
</head>
<body>
<h1>站点书签应用程序</h1>
<!-- 添加书签表单 -->
<form id="form">
<input type="text" id="url" placeholder="输入要添加的站点">
<button type="submit">添加</button>
</form>
<!-- 展示书签列表 -->
<ul id="bookmark-list"></ul>
<script>
// 封装Local Storage访问方法
var storage = {
get: function(key) {
return JSON.parse(localStorage.getItem(key));
},
set: function(key, value) {
localStorage.setItem(key, JSON.stringify(value));
},
remove: function(key) {
localStorage.removeItem(key);
}
};
// 获取并展示书签
function showBookmarks() {
var bookmarks = storage.get('bookmarks') || [];
var listEl = document.getElementById('bookmark-list');
listEl.innerHTML = '';
for (var i = 0; i < bookmarks.length; i++) {
var bookmark = bookmarks[i];
var liEl = document.createElement('li');
liEl.innerHTML = '<a href="' + bookmark + '">' + bookmark + '</a> ' +
'<button onclick="removeBookmark(' + i + ')">删除</button>';
listEl.appendChild(liEl);
}
}
// 添加书签
function addBookmark(url) {
var bookmarks = storage.get('bookmarks') || [];
bookmarks.push(url);
storage.set('bookmarks', bookmarks);
showBookmarks();
}
// 删除书签
function removeBookmark(index) {
var bookmarks = storage.get('bookmarks') || [];
bookmarks.splice(index, 1);
storage.set('bookmarks', bookmarks);
showBookmarks();
}
// 在表单提交时添加书签
var formEl = document.getElementById('form');
formEl.addEventListener('submit', function(event) {
event.preventDefault();
var url = document.getElementById('url').value.trim();
if (url) {
addBookmark(url);
document.getElementById('url').value = '';
}
});
// 初始化时展示书签
showBookmarks();
</script>
</body>
</html>
上面的代码使用Local Storage实现了书签的添加、查看和删除功能。通过封装了Local Storage访问方法，我们避免了多处重复代码。在showBookmarks函数中，我们获取了Local Storage中存储的书签列表，并展示在了页面上。
在添加书签时，我们获取了输入框中的值，然后将该值添加到书签列表中，并存储到Local Storage中。在删除书签时，我们获取了书签在列表中的索引，然后将该索引对应的书签从书签列表中删除，并更新Local Storage中的书签列表。
以上便是如何使用Local Storage和JavaScript构建一个简单的站点书签应用程序。可以根据实际需求进行扩展或修改，例如添加书签分类、搜索书签等功能。