javascript的localStorage(Web Storage)小项目

我们下面举一个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即可

javascript的localStorage(Web Storage)小项目

猜你喜欢