极客观点
项目管理
HarmonyOS
在看Head First HTML5 第九章 Web Storage API
开网页以后Chrome报错：
HTML代码是
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Note to Self</title>
<link rel="stylesheet" href="notetoself.css">
</head>
<body>
<form>
<label for="note_color">Color:</label>
<select id="note_color">
<option value="LightGoldenRodYellow">yellow</option>
<option value="PaleGreen">green</option>
<option value="LightPink">pink</option>
<option value="LightBlue">blue</option>
</select>
<label for="note_text">Text:</label>
<input type="text" id="note_text">
<input type="button" id="add_button" value="Add Sticky Note to Self">
</form>
<ul id="stickies">
</ul>
<script src="notetoself.js"></script>
</body>
</html>
JS代码是
window.onload = init;
function init() {
var button = document.getElementById('add_button');
button.onclick = createSticky;
var stickiesArray = getStickiesArray();
for (var i=0; i<stickiesArray.length; i++) {
var key = stickiesArray[i];
var value = JSON.parse(localStorage[key]);
addStickyToDOM(key, value);
}
}
function addStickyToDOM(key, stickyObj) {
var stickies = document.getElementById('stickies');
var sticky = document.createElement('li');
sticky.setAttribute('id', key);
sticky.style.backgroundColor = stickyObj.color;
var span = document.createElement('span');
span.setAttribute('class', 'sticky');
span.innerHTML = stickyObj.value;
sticky.appendChild(span);
stickies.appendChild(sticky);
sticky.onclick = deleteSticky;
}
function createSticky() {
var stickiesArray = getStickiesArray();
var value = document.getElementById('note_text').value;
var colorSelectObj = document.getElementById('note_color');
var index = colorSelectObj.selectedIndex;
var color = colorSelectObj[index].value;
var currentDate = new Date();
var key = "sticky_" + currentDate.getTime();
var stickyObj = {
"value": value,
"color": color
};
localStorage.setItem(key, JSON.stringify(stickyObj));
stickiesArray.push(key);
localStorage.setItem('stickiesArray', JSON.stringify(stickiesArray));
addStickyToDOM(key, stickyObj);
}
function getStickiesArray() {
var stickiesArray = localStorage.getItem('stickiesArray');
if (!stickiesArray) {
stickiesArray = [];
localStorage.setItem('stickiesArray', JSON.stringify(stickiesArray));
}else{
stickiesArray = JSON.parse(stickiesArray);
}
return stickiesArray;
}
function deleteSticky(e) {
var key = e.target.id;
if (e.target.tagName.toLowerCase() == "span") {
key = e.target.parentNode.id;
}
localStorage.removeItem(key);
var stickiesArray = getStickiesArray();
if (stickiesArray) {
for (var i=0; i<stickiesArray.length; i++) {
if (key == stickiesArray[i]) {
stickiesArray.splice(i, 1);
}
}
localStorage.setItem('stickiesArray', JSON.stringify(stickiesArray));
removeStickyFromDOM(key);
}
}
function removeStickyFromDOM(key) {
var sticky = document.getElementById(key);
sticky.parentNode.removeChild(sticky);
}
这是怎么回事？Σ( ° △ °|||)︴
本地存储也不灵了...
html5
JSON.Parse 试试