Question

此处My code！

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script>
</head>

<body>
<h1>Hello Plunker!</h1>

<div id="myHeader">     
    <a style="float:left" href="index.html">Index</a>
    <a href="page1.html">Page1</a>
    <a href="page2.html">Page2</a>
</div>

<h1>Index</h1>
</body>

</html>

我正在为每个网页构建我的Web应用程序，其顶部带有相同的导航栏。现在如果你点击我的例子中导航栏中的page1，你会在Page.html上看到两个按钮，添加Prev并添加Ext。

如果单击“添加上一页”，页面将在page1之前的导航栏中追加。

如果单击添加Ext，页面将在page1之后的导航栏中追加。

如何将附加的元素保存为例如page1-ext / page-prev到localStorage，这样当我导航到第2页或刷新页面时，它会一直显示或附加！

我很感谢每一个提示或解决方案！干杯！

Answer 1

使用window.localStorage.setItem在localStorage中设置项目。另外，我在身体末端移动<script src="script.js"></script>因为否则我会得到奇怪的行为。

的index.html：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello Plunker!</h1>

    <div id="myHeader">     
        <a href="index.html">Index</a> 
        <a id="t1" href="page1.html">Page1</a>
        <a id="t2" href="page2.html">Page2</a>
    </div>

    <h1>Index</h1>

    <script src="script.js"></script>
</body>
</html>

page1.html：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello Plunker!</h1>

    <div id="myHeader">     
        <a href="index.html">Menu</a>
        <a id="t1" href="page1.html">Page1</a>
        <a id="t2" href="page2.html">Page2</a>
    </div>

    <h1>Page1</h1>
    <button id="addPrev"> Add Prev </button>
    <button id="addExt"> Add Ext </button>

    <script src="script.js"></script>
</body>
</html>

page2.html：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <h1>Hello Plunker!</h1>

    <div id="myHeader">     
        <a href="index.html">Menu</a>
        <a id="t1" href="page1.html">Page1</a>
        <a id="t2" href="page2.html">Page2</a>
    </div>

    <h1>Page2</h1>

    <script src="script.js"></script>
</body>
</html>

script.js：在此处移动所有事件（在一个地方）。单击按钮，添加内容并设置localStorage项目。加载此文件时，检查是否设置了localStorage项（在本例中为== 1）。如果是，则自动显示菜单项：

$("#addPrev").on("click", function() {
    $('#1').after('<a href="page1-ext.html">Page1-Ext</a>');
    window.localStorage.setItem('previous', 1);
});

$("#addExt").on("click", function() {
    $('#1').after('<a href="page1-ext.html">Page1-Ext</a>');
    window.localStorage.setItem('next', 1);
});

if (window.localStorage.getItem('previous') == 1) {
    $('#t1').before('<a href="page1-prev.html">Page1-Prev</a>');
}

if (window.localStorage.getItem('next') == 1) {
    $('#t1').before('<a href="page1-prev.html">Page1-Prev</a>');
}

但是，要注意一个（负面）事项，您必须在每个页面中编写<a id="t1" href="page1.html">Page1</a>和<a id="t2" href="page2.html">Page2</a>来显示这些菜单链接，否则您将看不到它们。

单击按钮时在导航栏中附加元素，并将附加元素保存到localStorage

1 个答案: