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