Question

这是用于添加学生的页面的HTML

<!DOCTYPE html> 
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="function.js"></script>
</head>
<header>
    <nav>
        <img src="logo.jpg"><h1 id="titt">North Park Clubs</h1>
    <li><a href="attendance.html">Attendance</a></li>
    </nav>
</header> 
<body>
<h1>Add A Student</h1>
    <input type="text" id="indx"></input>
    <input type="text" id="sFirstName"></input>
    <input type="text" id="sLastName"></input>
    <input type="text" id="sNumber"></input>
    <input type="text" id="sPoints"></input>
    <input type="button" onclick="save()" value="Save"></input>
</body>

这是查看出席情况的页面的HTML

<!DOCTYPE html> 
<head>
<link href="style.css" rel="stylesheet" type="text/css">
    <script href="functions.js"></script>
</head>
<header>
    <nav>
        <img src="logo.jpg"><h1 id="titt">North Park Clubs</h1>
    <li><a href="attendance.html">Attendance</a></li>
    </nav>
</header>   
<body onload="load()">
<table id="attendance">
    <input type="button" value="Add Student" id="add" link="addStudent.html">

       <tr>
    <td></td>
    <td>First Name</td>
    <td>Last Name</td>  
    <td>Student Number</td>
    <td>Points</td>
           <td>Absent (If student is present leave this unchecked)</td>
        </tr>
    <td id="indx"></td>
    <td id="sFirstName"></td>
    <td id="sLastName"></td>
    <td id="sNumber"></td>
    <td id="sPoints"></td>
    <td><input id="a" type="checkbox"></td>
       </table>
</body>

这是我的JavaScript

var indx = [];
var sFirstName = [];
var sLastName = [];
var sNumber = [];
var sPoints = [];
var a = [];
var attendance = [];
var obj = JSON.parse(attendance);
function save(){
    localStorage.setItem("idex", document.getElementById('indx').value);
    localStorage.setItem("fName", document.getElementById('sFirstName').value);
    localStorage.setItem("lName", document.getElementById('sLastName').value);
    localStorage.setItem("numb", document.getElementById('sNumber').value);
}

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
//var fName = localStorage.sFirstName;
//var lName = localStorage.sLastName
//var numb = localStorage,sNumber

//onload document.getElementById('attendance');

function load(){
    document.getElementById.idex;
    document.getElementById.fName;
    document.getElementById.lName;
    document.getElementById.numb;
}

我不太确定我做错了什么，所以解释也会很棒！谢谢！：）

Answer 1

问题是如何仅使用HTML，CSS和JavaScript向我的localstorage添加索引？

编码明智的HTML5和CSS与它无关，除了显示结束值。

这是一个小提琴：http://jsfiddle.net/f3aej450/2/

的JavaScript（有载）：

 //check to see if index exists.
// set it to 0 if it does not, 
// otherwise add 1
(localStorage.getItem("index")) ?
localStorage.setItem("index", parseInt(localStorage.getItem('index')) + 1) :
localStorage.setItem("index", 0);

// alert the user to the index number
alert(localStorage.getItem("index"));

作为旁注，我建议使用sessionStorage而不是localStorage - 不同之处在于，当浏览器窗口/选项卡关闭时，sessionStorage会清除。 localStorage只是坐在那里，直到你覆盖它或删除它。

如何仅使用HTML，CSS和JavaScript向我的本地存储添加索引？

1 个答案: