html5本地存储文本框,HTML5本地存储：localStorage即时贴例子（删除便利贴）

html和css文件同

HTML5本地存储：localStorage即时贴例子(存储读取)

下面js文件以实现便利贴的删除功能。

notetoself.js

window.onload = init

//页面加载时我们将调用init函数

function init() {

//它会从localstorage读取所有的即时贴，并通过DOM把他们增加到ul中

var button = document.getElementByIdx_x("add_button");

button.onclick = createSticky; //按钮事件

var stickiesArray = getStickiesArray(); //获取包含即时贴键的数组

for (var i = 0; i < stickiesArray.length; i++)

{//迭代处理即时贴数组

var key = stickiesArray[i]; //获取各个键

var value = localStorage[key]; //并从localStorage获取相应的值

//alert(stickiesArray.length);

addStickyToDom(key, value);

}

}

function createSticky() {

var stickiesArray = getStickiesArray(); //获取即时贴数组

var currentDate = new Date();

var time = currentDate.getTime();

var key = "sticky_" + time;//为新即时贴创建唯一键

var value = document.getElementByIdx_x("note_text").value;

//获取表单文本框中的文本

//var key = "sticky_" + localStorage.length; //创建一个唯一的键

localStorage.setItem(key,

value);//向localStorage增加一条即时贴数据

stickiesArray.push(key);

localStorage.setItem("stickiesArray",

JSON.stringify(stickiesArray));

addStickyToDom(key, value);

note_text.value = '';

}

function getStickiesArray() {

var stickiesArray = localStorage.getItem("stickiesArray");

//首先从localStorage得到数据项stickiesArray

//alert(localStorage.getItem("sticky_0"));

if (!stickiesArray) { //如果没有数据项stickiesArray

stickiesArray = [];  //创建一个空数组

localStorage.setItem("stickiesArray",

JSON.stringify(stickiesArray)); //转化成字符串给数组赋值

} else {

stickiesArray = JSON.parse(stickiesArray);

//如果存在数据项stickiesArray,需要利用JSON.parse对它进行解析，将它转化成一个js数组。

}

return stickiesArray; //不论哪种情况，最后都会返回一个数组，所以返回这个数组。

}

function addStickyToDom(key, value) {

//我们将使用即时贴的键来唯一标识便条

var stickies = document.getElementByIdx_x("stickies");

var sticky = document.createElement_x("li");

sticky.setAttribute("id", "key"); //为DOM中标识即时贴的

元素增加一个唯一的id

var span = document.createElement_x("span");

span.setAttribute("class","sticky");

span.innerHTML = value;

sticky.appendChild(span);

stickies.appendChild(sticky);

sticky.onclick = deleteSticky; //为各个即时贴增加点击处理程序

}

function deleteSticky(e) {

//无论哪种情况，点击即时贴生成的事件都会传递到deleteSticky

//alert("123");

var key = e.target.id;

//目标target就是所点击并生成事件的元素，可以熊target属性得到这个元素的id，如果目标是

，就大功告成了。

if (e.target.tagName.toLowerCase() == "span") {

//如果目标是，

key = e.target.parentNode.id; //则需要得到它的父元素

的id

}

localStorage.removeItem(key);

//首先，使用removeItem从localStorage删除即时贴，传入要删除的即时贴的键。

var stickiesArray = getStickiesArray();

//使用getStickiesArray函数从LocalStorage得到stickiesArray

if (stickiesArray) { //确保有一个stickiesArray，以防万一

for (var i = 0; i < stickiesArray.length; i++) {

//然后迭代处理数组来查找我们想要删除的键

if (key = stickiesArray[i]) {

stickiesArray.splice(i, 1);

//找到这个键后，使用splice将它从数组删除。splice会将数组中从第一个参数(i)指定的位置开始的元素删除，删除的元素个数由第二个参数(1)指定。

}

}

localStorage.setItem("stickiesArray",

JSON.stringify(stickiesArray));

//最后将stickiesArray在保存到localStorage

removeStickyFromDOM(key); //从页面删除即时贴

}

}

function removeStickyFromDOM(key) { //传入所寻找的sticky元素的键

var sticky = document.getElementByIdx_x(key); //从DOM获取

元素

sticky.parentNode.removeChild(sticky); //

的父元素

然后使用removeChild删除子节点

}