[Head First Html5 Programming notes] Chapter 9 Web存储

Chapter 9 Web存储

---

1 Html表单元素回顾

<label for="color">Select colors:</label>
<select id="color">
	<option value="white" selected="selected">White</option>
	<option value="black" selected="selected">Black</option>
</select>

var selectObj = document.getElementById("color");
var index = selectObj.selectedIndex;
var value = selectObj[index].value;

2 Web存储

1. Web存储是浏览器中的一个存储库，也是一个API，可用来从本地存储库保存和获取数据项

2. Web存储分为本地存储和会话存储，两者使用完全相同的API

   (1) localStorage：本地存储是持久的，关闭浏览器仍然保留数据

   (2) sessionStorage：会话存储在关闭浏览器时删除数据

3. Web存储按域组织，大多数浏览器支持每个域有至少5MB的存储空间

3 Web存储API

1. 数据以键值对形式存储，可用setItem方法存储数据，用getItem方法获取数据

   var key = "color";
   var value = "blue";
   localStorage.setItem(key, value);		//向本地存储增加一个键值对
   var data = localStorage.getItem(key);	//从本地存储获取一个值
   data = localStorage[key];				//另一种取值方式
   

2. 迭代localStorage

   for(var i = 0; i < localStorage.length; i++) {
   	var key = localStorage.key(i);
       var value = localStorage[key];
   }
   

   ​ (1) localStorage.length返回存储数据长度

   ​ (2) localStorage.key(index)返回指定位置上的键，特别地localStorage.key()返回所有键

3. 删除localStorage数据

   localStorage.removeItem(key);	//删除指定的键值
   localStorage.clear();			//删除所有数据
   

4 Web存储命名技巧

​ 数据key的命名必须唯一，方法之一是按内容意义命名后加上随机数，如

var key = "sticky_" + (new Date()).getTime();

5 Web存储数据格式

1. Web存储数据格式必须为字符串

2. 存储数字

   (1) 存储数字时，可直接输入数字，但JavaScript会将数字转化为字符串

   (2) 可使用parseInt或parseFloat将字符串转为数字

   localStorage.setItem("temperature", 25);	
   var value = localStorage.getItem("temperature");			//结果为"25"
   var value = parseInt(localStorage.getItem("temperature"));	//结果为25
   var value = parseFloat(localStroage.getItem("temperature"));//结果为25.0
   

3. 存储数组、JavaScript对象

   (1) JSON.stringfy将其转化为JSON串

   var voltage = [25.0, 25.1, 25.0, 24.9];
   localStorage.setItem("voltage", JSON.stringfy(voltage));
   var fido = {
       "name": "fido",
       "weight": 30
   };
   localStorage.setItem("fido", JSON.stringfy(fido));
   

   (2) JSON.parse将JSON串转为JavaScript对象

   var fido = JSON.parse(localStorage.getItem("fido"));
   

6 Web存储空间

1. 大多浏览器，对每个源(域)分配了5MB以上的存储空间
2. 当存储空间被占满时，将抛出异常，大多为QUOTA_EXCEEDED_ERR异常

7 会话存储

1. Web存储分为本地存储和会话存储
2. 会话存储为sessionStorage，本地存储为localStorage，两者使用的API一致（即以上属性和方法对于sessionStorage同样有效）

8 删除

1. 从localStorage删除数据：localStorage.removeItem(key)

2. 从数组删除元素：myArray.splice(index, num)，index为开始删除的索引位置，num为删除的元素个数

3. 从DOM删除元素：利用父元素的removeChild方法

   var stickies = document.getElementById("stickies");
   var sticky = document.getElementById("sticky");
   stickies.removeChild(sticky);
   //or
   var sticky = document.getElementById("sticky");
   sticky.parentNode.removeChild(sticky);
   

9 通过HTML属性制定样式

li.style.background = "red";	//利用HTML元素的style属性