javascript的localStorage(Web Storage)小專案
阿新 • • 發佈:2018-12-16
我們下面舉一個javascript localStorage練手的小專案,是headfirsthtml5中的一個例子,不過我將其進行美化。
專案資源(原始碼,圖片)地址:https://github.com/youaresherlock/HeadFirstHtml5/tree/master/chapter9
做什麼?
我們通過下拉列表選擇要生成的便利貼的Color,以及輸入便利貼的Text文字。
生成後效果如下,同時將所有便利貼的color、text、key(我們利用new Date().
getTime()來生成不一樣id的key)利用localStorage儲存到本地,下次重新整理就載入
(購物車物品記錄也是類似原理)
下圖是初始生成的便利貼
當滑鼠懸浮在一個便利貼上,便利貼放大,同時顏色漸變,可以看到還有一個透明的垃圾桶。
點選垃圾桶可以刪除
點選垃圾桶刪除會彈出對話方塊,詢問是否刪除
下面是程式碼:
noteself.html
<!doctype html> <html> <head> <title>Note to Self</title> <meta charset="utf-8"> <link rel="stylesheet" href="notetoself.css"> <script src="notetoself.js"></script> </head> <body> <from> <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"> </from> <ul id="stickies"> </ul> </body> </html>
css樣式notetoself.css
body { background-color: #4184aa; font-size: 100%; } form input#note_text { width: 350px; } ul#stickies li { display: block; list-style: none; z-index: 1; float: left; margin: 30px; padding: 15px 15px 50px 15px; width: 200px; height: 200px; border: 1px solid #bfbfbf; border-radius: 20px; background-color: lightgoldenrodyellow; color: black; text-decoration: none; -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; transition: all 0.5s ease-in; /* overflow屬性指定如果內容溢位一個 元素的框,會發生什麼 visible、hidden、scroll、auto、inherit */ overflow: hidden; } ul#stickies li span.sticky { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 200%; } ul#stickies li img.delete { position: absolute; left: 158px; top: 190px; /*for IE*/ filter: alpha(opacity=0.3); opacity: 0.1; transition: opacity 1s; -moz-transition: opacity 1s; /* Firefox 4 */ -webkit-transition: opacity 1s; /* Safari 和 Chrome */ -o-transition: opacity 1s; /* Opera */ } ul#stickies li img.delete:hover { /*for IE*/ filter: alpha(opacity=1); opacity: 1; } ul#stickies li:nth-child(even) { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); } ul#stickies li:nth-child(odd) { -webkit-transfrom: rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -ms-transform: rotate(-1deg); transform: rotate(-1deg); } ul#stickies li:nth-child(3n) { -webkit-transform: rotate(1deg); -moz-transform: rotate(1deg); -o-transform: rotate(1deg); -ms-transform: rotate(1deg); transform: rotate(1deg); } /* Transform demo Uses the transition (defined above) to ease in. */ ul#stickies li:hover { -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4); -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4); -o-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.25); -moz-transform: rotate(0deg) scale(1.25); -o-transform: rotate(0deg) scale(1.25); /*IE 9*/ -ms-transform: rotate(0deg) scale(1.25); /*Safari and Chrome*/ transform: rotate(0deg) scale(1.25); background: linear-gradient(lightgoldenrodyellow, lightblue); z-index: 10; }
js程式碼:
// window.onload = init;
// 下面的程式碼可能會出現key重複問題,同時如果同域中有其他的資料,會
// 非常影響效能
// function init() {
// var button = document.getElementById("add_button");
// button.onclick = createSticky;
// for(var i = 0; i < localStorage.length; i++) {
// var key = localStorage.key(i);
// if(key.substring(0, 6) == "sticky") {
// var value = localStorage.getItem(key);
// addStickyToDOM(value);
// }
// }
// }
// function createSticky() {
// var value = document.getElementById("note_text").value;
// var key = "sticky_" + localStorage.length;
// localStorage.setItem(key, value);
// addStickyToDOM(value);
// }
//最終方案(類似購物車儲存購物url一樣)
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 createSticky() {
var value = document.getElementById("note_text").value;
var temp = value.trim(); //返回的是一個新的字串,去除首位空格
if(!temp) {
return;
}
var stickiesArray = getStickiesArray();
var currentDate = new Date();
//我們儲存選擇的sticky以及它對應的顏色,組成物件解析成JSON儲存起來
var colorSelectObj = document.getElementById("note_color");
//selectedIndex屬性可設定或返回下拉列表中被選選項的索引號
var index = colorSelectObj.selectedIndex;
var color = colorSelectObj[index].value;
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() {
//localStorage.getItem(key) //如果不存在為null
var stickiesArray = localStorage.getItem("stickiesArray");
if(!stickiesArray) {
stickiesArray = [];
localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
} else {
stickiesArray = JSON.parse(stickiesArray); //JSON字串解析成物件
}
return stickiesArray;
}
//此函式不變
function addStickyToDOM(key, stickyObj) {
var stickies = document.getElementById("stickies");
var sticky = document.createElement("li");
/*
span標籤如果不應用樣式,那麼<span>元素中的文字與其他文字不會任何視覺上的差異。
*/
var span = document.createElement("span");
var picture = document.createElement("img");
picture.setAttribute("class", "delete");
picture.src = "delete2.png";
span.setAttribute("class", "sticky");
span.innerHTML = stickyObj.value;
sticky.setAttribute("id", key);
sticky.style.backgroundColor = stickyObj.color;
sticky.appendChild(span);
sticky.appendChild(picture);
stickies.appendChild(sticky);
picture.onclick = deleteSticky;
}
function deleteSticky(e) {
//parentNode屬性可返回某結點的父結點,target為
// 所點選並生成事件的元素
if(window.confirm("are you sure to delete this sticky?")){
var key = e.target.parentNode.id;
localStorage.removeItem(key);
var stickiesArray = getStickiesArray();
for(var i = 0; i < stickiesArray.length; i++) {
if(key == stickiesArray[i]) {
//array.splice(index, howmany, item1,....., itemX)
stickiesArray.splice(i, 1);
}
}
localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
removeStickyFromDom(key);
}
}
function removeStickyFromDom(key) {
var sticky = document.getElementById(key);
//removeChild(node)方法可從子節點列表中刪除某個節點
sticky.parentNode.removeChild(sticky);
}
開啟瀏覽器可以右擊檢視本地儲存內容,如下圖:
可以看到我們將所有的便利貼的標識key儲存到stickiesArray陣列中,同時也有對應key的一個js字面量物件(這裡是JSON格式字串),localStorage只能儲存字串,用js儲存時注意使用JSON.stringify(object),js讀取的時候注意用JSON.parse(json_string)
另外如果想要臨時快取資料(關閉瀏覽器資料消失) ,將程式碼中localStorage替換成sessionStorage即可