HTML 如何将代码中使用Local Storage的部分全部变换为DB形态
问题描述：
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">
#linkContainer {
display: flex;
flex-wrap: wrap;
width: 310px;
}
#linkContainer a {
display: block;
list-style-type: none;
text-align: center;
font-size: 3em;
border: 1px solid;
width: 150px;
float: left;
margin: 1px;
}
a {
text-decoration: none;
}
.pagination {
visibility: hidden;
display: inline-block;
}
.pagination div {
float: left;
padding: 8px 16px;
}
.pagination div.active {
background-color: #4CAF50;
color: white;
}
.pagination div:hover:not(.active) {background-color: #ddd;}
.maindiv {
width: 320px;
float: left;
}
iframe {
width: 500px;
height: 500px;
float: left;
}
</style>
<script type="text/javascript">
var linkArr = new Array();
var curPage = 0;
function addLink()
{
if (linkArr.findIndex(checkTitle) >= 0)
{
window.alert("A favorite title that already exists. Please use a different title.");
return;
}
linkArr.push({title: document.forms[0].linkTitle.value, src: document.forms[0].linkSrc.value});
linkArr.sort(compareTitle);
document.forms[0].reset();
makePages();
showLinks();
updateData();
}
function checkTitle(link)
{
return link.title == document.forms[0].linkTitle.value;
}
function compareTitle(link1, link2)
{
if (link1.title > link2.title)
return 1;
else if (link1.title < link2.title)
return -1;
else
return 0;
}
function deleteLink()
{
var idx = linkArr.findIndex(checkTitle);
if (idx < 0)
{
window.alert("No favorites with matching titles.");
return;
}
linkArr.splice(idx, 1);
makePages();
showLinks();
updateData();
}
function clearAll()
{
linkArr = Array();
document.getElementById("linkContainer").innerHTML = "";
updateData();
}
function showLinks()
{
var linkContainer = document.getElementById("linkContainer");
linkContainer.innerHTML = "";
var startIdx = curPage * 10;
var endIdx = startIdx + 9;
for(var idx = startIdx; idx <= endIdx && idx < linkArr.length; idx++)
{
var link = makeLink(linkArr[idx].title, linkArr[idx].src);
linkContainer.innerHTML += link;
}
}
function makeLink(title, src)
{
return "<a href='" + src + "' target=\"linkFrame\">" + title + "</a>";
}
function makePages()
{
if (linkArr.length > 10)
{
var pageNav = document.getElementById("pageNav");
pageNav.style.visibility = "visible";
pageNav.innerHTML = "";
var nPage = Math.ceil(linkArr.length / 10);
for(var i =0; i < nPage; i++)
{
if (i == curPage)
pageNav.innerHTML += "<div class=\"active\" onclick=\"changePage(" + i +")\">" + (i + 1) + "</div>";
else
pageNav.innerHTML += "<div onclick=\"changePage(" + i +")\">" + (i + 1) + "</div>";
}
}
}
function changePage(pageNum)
{
curPage = pageNum;
makePages();
showLinks();
}
function updateData()
{
localStorage.removeItem("links");
localStorage.setItem("links", JSON.stringify(linkArr));
}
function start()
{
var links = localStorage.getItem("links");
if (links != null)
{
linkArr = JSON.parse(links);
makePages();
showLinks();
}
}
</script>
</head>
<body onload="start()">
<div class="maindiv">
<form name="form1" method="GET" action="#">
<label>Favorite Title: <input type="text" name="linkTitle" id="linkTitle"></label><br>
<label>Favorite Links: <input type="text" name="linkSrc" id="linkSrc"></label><br>
<input type="button" name="addBtn" id="addBtn" value="Add to Favorites" onclick="addLink()">
<input type="button" name="delBtn" id="delBtn" value="Delete Favorites" onclick="deleteLink()">
<input type="reset" name="ClearBtn" id="clearBtn" value="Delete all" onclick="clearAll()">
</form>
<br>
<div id="linkContainer">
</div>
<nav class="pagination" id="pageNav">
</nav>
</div>
<iframe title="iframe for link" name="linkFrame"></iframe>
</body>
</html>
请问如何将这个代码中使用Local Storage的部分全部变换为DB形态
只用将源html代码变更为php文件即可
Databast名称由本人生成并使用 内部Table可以自由创建和使用
请问这样要怎么写？
答
php需要搭建web服务器，看这篇文章
php手动搭建wamp环境（一）--之 Windows系统下PHP环境搭建 - echoppy - 博客园
1、PHP环境搭建的前提是 Apache HTTP Server （Apache 服务器）已经安装部署成功，并可以正常访问到服务器的主页面。Apache HTTP Server 的安装部署已经在上一篇
https://www.cnblogs.com/echoppy/p/9959296.html
php操作mysql crud示例
一个简单的CRUD示例：使用PHP+MySQL_addr25169的博客-CSDN博客
一个简单的CRUD示例：使用PHP+MySQL前情总是听说CRUD，但一直不清楚是做什么的，就去查了一下，大概的意思是一组常见的数据库操作：增（create）、查（read）、改（update）删（delete），大概是，也有其他的翻译，这里大概了解一下就好。截止到现在，网上好像没有什么很小的示例来阐述CRUD这个概念的，然后就去查了一番资料，写了一个真的很小白的、很简单、未使用任何...
https://blog.csdn.net/addr25169/article/details/101580687