web 存储

最新推荐文章于 2023-06-17 00:21:47 发布

BugsAroundMe

最新推荐文章于 2023-06-17 00:21:47 发布

阅读量554

点赞数

分类专栏： HTML5 & javascript 文章标签： web html5 json localStorage web存储

本文链接：https://blog.csdn.net/u010392792/article/details/26505963

版权

HTML5 & javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

cookie工作原理：

1、浏览器获取一个web页面，服务器可以随响应发送一个cookie。Cookie中包含一个或多个键值对

2、下次浏览器向页面发送请求时，他会随请求同时发送之前收到的cookie

3、服务器可以使用cookie实现个性化的体验，如定制用户体验，存储数据，或者维护游戏状态

HTML5 Web存储工作原理：

1、页面可以在浏览器的本地存储中存储一个或多个键/值对。

2、用键来获取相应的值。

涉及到web storage API

示例：

<!doctype html>
<html>
<head>
<title>Note to Self</title>
<meta charset="utf-8">
<link rel="stylesheet" href="notetoself.css">
<script>
	localStorage.setItem("sticky_0", "Pick up dry cleaning");
	localStorage.setItem("sticky_1", "Cancel cable tv, who needs it now?");
	var stickyValue = localStorage.getItem("sticky_0");
	alert(stickyValue);
</script>
</head>
<body>

</body>
</html>

localStorage.setItem("numitems",1);

这里看起来式存储一个整数，其实是一个字符串，所以在取出这个值的时候：

var numItems=parseInt(localStorage.getItem("numitems"));

浮点数要用到parseFloat

另外可以不适用setItem方法，而是把localStorage看做是一个关联数组

localStorage["sticky_0"]="Pick up dry cleaning";

获取：

var sticky=localStorage["sticky_0"];

localStorage的属性length和key

for（var i=0;i<localStorage.length;i++）{
    var key=localStorage.key(i);//各个数据项的键
    var value=localStorage[key];//获取值
    alert(value);
}

想要删除，可以再Resources页面找到local Storage,local files,可以删除和编辑。

localStorage.clear();会删除与这个维护页面的源关联的所有数据项。

localStorage.removeItem(key);会删除localStorage中有指定键的数据项。

一个例子：可以添加即时贴的应用

使用localStorage长度来创建键，如果有其他数据项，跟踪机制会出现问题

/* notetoself.js
 *
 * First version after becoming a Sticky Notes app.
 * Uses length to create a new sticky note id.
 */

window.onload = init;

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);
}


function addStickyToDOM(value) {
	var stickies = document.getElementById("stickies");
	var sticky = document.createElement("li");
	var span = document.createElement("span");
	span.setAttribute("class", "sticky");
	span.innerHTML = value;
	sticky.appendChild(span);
	stickies.appendChild(sticky);
}

function clearStickyNotes() {
	localStorage.clear();
	var stickyList = document.getElementById("stickies");
	var stickies = stickyList.childNodes;
	for (var i = stickies.length-1; i >= 0; i--) {
		stickyList.removeChild(stickies[i]);
	}
}

现在使用Date（）来创建一个唯一键，并且把新即时贴存储在数组

/* notetoself.js
 *
 * This version uses the array and allows delete of the sticky note
 * Also includes a Clear all notes button that clears out everything
 * in local storage, removes sticky notes from the DOM and resets the 
 * stickies array to []
 */

window.onload = init;

function init() {
	var button = document.getElementById("add_button");
	button.onclick = createSticky;
/*
	var clearButton = document.getElementById("clear_button");
	clearButton.onclick = clearStickyNotes;
*/

	var stickiesArray = localStorage["stickiesArray"];
	if (!stickiesArray) {
		stickiesArray = [];
		localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
	}
	else {
		stickiesArray = JSON.parse(stickiesArray);
	}

	// replace with
	// var stickiesAray = getStickiesArray();
	
	for (var i = 0; i < stickiesArray.length; i++) {
		var key = stickiesArray[i];
		var value = localStorage[key];
		addStickyToDOM(key, value);
	}	
}

function getStickiesArray() {
	var stickiesArray = localStorage.getItem("stickiesArray");
	if (!stickiesArray) {
		stickiesArray = [];
		localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
	} else {
		stickiesArray = JSON.parse(stickiesArray);
	}
	return stickiesArray;
}

function createSticky() {
	var stickiesArray = getStickiesArray();
	var currentDate = new Date();
	var key = "sticky_" + currentDate.getTime();
	var value = document.getElementById("note_text").value;

	localStorage.setItem(key, value);
	stickiesArray.push(key);
	localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
	
	addStickyToDOM(key, value);
}

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 addStickyToDOM(key, value) {
	var stickies = document.getElementById("stickies");
	var sticky = document.createElement("li");
	sticky.setAttribute("id", key);
	var span = document.createElement("span");
	span.setAttribute("class", "sticky");
	span.innerHTML = value;
	sticky.appendChild(span);
	stickies.appendChild(sticky);

	sticky.onclick = deleteSticky;
}

function removeStickyFromDOM(key) {
	var sticky = document.getElementById(key);
	sticky.parentNode.removeChild(sticky);
}


function clearStickyNotes() {
	localStorage.clear();
	var stickyList = document.getElementById("stickies");
	var stickies = stickyList.childNodes;
	for (var i = stickies.length-1; i >= 0; i--) {
		stickyList.removeChild(stickies[i]);
	}

	// reset notes array
	var stickiesArray = getStickiesArray();
}

如果即时贴还有背景颜色属性，localStorage怎么存储颜色：

/* notetoself.js
 * 
 * This version uses the array and adds the color JSON
 */


window.onload = init;

function init() {
	var button = document.getElementById("add_button");
	button.onclick = createSticky;
/*
	var clearButton = document.getElementById("clear_button");
	clearButton.onclick = clearStickyNotes;
*/

	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 getStickiesArray() {
	var stickiesArray = localStorage.getItem("stickiesArray");
	if (!stickiesArray) {
		stickiesArray = [];
		localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
	} else {
		stickiesArray = JSON.parse(stickiesArray);
	}
	return stickiesArray;
}

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;

	// create sticky note using JSON to hold value and color
	var currentDate = new Date();
	var key = "sticky_" + currentDate.getTime();
	var stickyObj = {
			"value": value,
			"color": color
	};
	localStorage.setItem(key, JSON.stringify(stickyObj));

	// add new sticky note key to array and update notes array in localStorage
	stickiesArray.push(key);
	localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
	
	addStickyToDOM(key, stickyObj);
}

function deleteSticky(e) {
	var key = e.target.id;
	if (e.target.tagName.toLowerCase() == "span") {
		key = e.target.parentNode.id;
	}
	var stickiesArray = getStickiesArray();
	if (stickiesArray) {
		for (var i = 0; i < stickiesArray.length; i++) {
			if (key == stickiesArray[i]) {
				stickiesArray.splice(i,1);
			}
		}
		localStorage.removeItem(key);
		localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
		removeStickyFromDOM(key);
	}
}

function addStickyToDOM(key, stickyObj) {
	var stickies = document.getElementById("stickies");

	var sticky = document.createElement("li");
	// set the id attribute to the key so we can find it using
	// the ids stored in the stickies array
	sticky.setAttribute("id", key);
	// use the stickyObj color, and set the background-color CSS style
	sticky.style.backgroundColor = stickyObj.color;

	var span = document.createElement("span");
	span.setAttribute("class", "sticky");

	// use the stickyObj value as the text for the sticky note 
	span.innerHTML = stickyObj.value;

	// add everything to the DOM
	sticky.appendChild(span);
	stickies.appendChild(sticky);

	// add an event listener so when you click on a sticky note it can be deleted
	sticky.onclick = deleteSticky;
}

function removeStickyFromDOM(key) {
	var sticky = document.getElementById(key);
	sticky.parentNode.removeChild(sticky);
}

function clearStickyNotes() {
	localStorage.clear();
	var stickyList = document.getElementById("stickies");
	var stickies = stickyList.childNodes;
	for (var i = stickies.length-1; i >= 0; i--) {
		stickyList.removeChild(stickies[i]);
	}

	// reset stickies array
	var stickiesArray = getStickiesArray();
}