Html 对Web链接使用local.storage

Html 对Web链接使用local.storage,html,input,local-storage,Html,Input,Local Storage,我已经做了大量的搜索,但找不到我想要的东西,我对HTML/JavaScript非常陌生 我有一个基本的网站,有一个家庭和我的相机服务器(MotionEye)的链接。我希望其他一些人使用该网站,所以我想能够改变从每个用户的网站内的链接位置。更改主/外链接的最简单方法是什么?我使用AWS托管,因此根据AWS文档,PHP不是一个选项。我认为本地存储是最有意义的,但我找不到一种方法使其工作 这是我的index.html页面: <!DOCTYPE html> <html> <

我已经做了大量的搜索,但找不到我想要的东西,我对HTML/JavaScript非常陌生

我有一个基本的网站,有一个家庭和我的相机服务器(MotionEye)的链接。我希望其他一些人使用该网站,所以我想能够改变从每个用户的网站内的链接位置。更改主/外链接的最简单方法是什么?我使用AWS托管,因此根据AWS文档,PHP不是一个选项。我认为本地存储是最有意义的,但我找不到一种方法使其工作

这是我的index.html页面:

<!DOCTYPE html>

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<title>MotionEYE</title>
</head>

<body>

<!--top motion eye text-->
<div class="banner">motion eye</div>

<!--settings icon-->
<div class="container"><a href="settings.html"></div>
    <div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>  

<!-- Side navigation -->
<div class="sidenav">
    <a href="home_link_here">Home</a>
    <a href="away_link_here">Away</a>
<!--button place holders-->     
    <a href="#" >Arm</a>
    <a href="#" >Disarm</a>
    </div>

</body>
</html>
我希望有一个相同的设置页面,可以更改索引页面上主/外链接的链接位置,或者,如果更简单,可以在一个页面中全部工作。理想情况下,我使用的输入文本框可以更改home/away的href链接。越简单越好。这是我和几个人的个人项目,我帮他们安装了摄像头,但我真的不知道如何建立一个网站。请原谅我所犯的任何代码错误,因为我刚刚使用谷歌来达到我现在的水平

下面是我使用下面概述的jQuery方法完成的测试页面。链接起作用,但输入框不起作用

<!DOCTYPE>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<input type="text" id="home-text-field" placeholder="Update the Home Link" />
<input type="text" id="away-text-field" placeholder="Update the Away Link" />

<button type="button" id="submit" />Save Links</button> 

<a id="home-link" href="http://www.google.com">Home</a>
<a id="away-link" href="http://www.yahoo.com">Away</a>

<script>
$(document).ready(function() {
  let homeText = '';
  let awayText = '';

 //Get the DOM elements for the two links
 let $homeLink = $("#home-link");
 let $awayLink = $("#away-link");

    // Listen for changes to the text fields by their ID
$("#home-text-field").change(function(e) {
    homeText = $(this).text();
});

$("#away-text-field").change(function(e) {
       awayText = $(this).text();
})

    // When the button is clicked update the links
    $("#submit").click(function() {
        $homeLink.attr('href') = homeText;
        $awayLink.attr('href') = awayText
 })
})

</script>
</head>
</html>

保存链接
$(文档).ready(函数(){
让homeText='';
let awayText='';
//获取两个链接的DOM元素
设$homeLink=$(“#homeLink”);
让$awayLink=$(“#远离链接”);
//按文本字段的ID侦听对文本字段的更改
$(“#主文本字段”).change(函数(e){
homeText=$(this.text();
});
$(“#远离文本字段”).change(函数(e){
awayText=$(this.text();
})
//单击按钮后,更新链接
$(“#提交”)。单击(函数(){
$homeLink.attr('href')=homeText;
$awayLink.attr('href')=awayText
})
})

您可以使用JQuery动态更新链接。如果你给你的链接
id
标记,你可以用javascript轻松地选择它们,并动态地或用文本框更新位置。首先,您需要将JQuery包含到页面中,以便

将其添加到HTML文件的底部

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
您还可以添加一些文本字段来更新链接:

<input type="text" id="home-text-field" placeholder="Update the Home Link" />
<input type="text" id="away-text-field" placeholder="Update the Away Link" />
<button type="button" id="submit" />Save Links</button>

我们需要看看你的密码。举一个例子,说明你的网站的一部分是什么样子的,以及你希望它表现如何,这会有所帮助。请看.PHP是AWS中的一个选项。Amazon静态web托管不允许使用PHP,因为:谢谢你的帮助,我真的很感激。我做了一个测试页面,把你给我的所有东西都放在一起,链接可以正常工作,但是提交按钮并没有改变我使用谷歌和雅虎作为起始链接的链接,然后试图把它们改成我的相机服务器链接,但运气不好,也许我把它们放错了?看一看,我把它添加到了最初的帖子中。
<a id="home-link" href="home_link_here">Home</a>
<a id="away-link" href="away_link_here">Away</a>
<input type="text" id="home-text-field" placeholder="Update the Home Link" />
<input type="text" id="away-text-field" placeholder="Update the Away Link" />
<button type="button" id="submit" />Save Links</button>
$(document).ready(function() {
   let homeText = '';
   let awayText = '';

   //Get the DOM elements for the two links
   let $homeLink = $("#home-link");
   let $awayLink = $("#away-link");

    // Listen for changes to the text fields by their ID
   $("#home-text-field").change(function(e) {
       homeText = $(this).text();
   });

   $("#away-text-field").change(function(e) {
       awayText = $(this).text();
   })

    // When the button is clicked update the links
    $("#submit").click(function() {
        $homeLink.attr('href') = homeText;
        $awayLink.attr('href') = awayText
    })
})