当前位置: > > > HTML5 - Web存储使用详解(本地存储、会话存储)

HTML5 - Web存储使用详解(本地存储、会话存储)

1,Web存储介绍
HTML5的Web存储功能是让网页在用户计算机上保存一些信息。Web存储又分为两种:
(1)本地存储,对应 localStorage 对象。用于长期保存网站的数据,并且站内任何页面都可以访问该数据。
(2)会话存储,对应 sessionStorage 对象。用于临时保存针对一个窗口(或标签页)的数据。在访客关闭窗口或者标签页之前,这些数据是存在的,而关闭之后就会被浏览器删除。

2,本地存储与会话存储的异同
(1)本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。
(2)本地存储主要用来保存访客将来还能看到的数据。
(3)会话存储则用于保存那些需要从一个页面传递给下一个页面的数据。

3,Web存储容量限制
大多数浏览器都把本地存储限制为 5MB 以下。这个是和网站所在的域联系在一起的。

4,Web存储的使用样例
下面以本地存储(localStorage)为例,会话存储改成 sessionStorage 对象即可。

(1)文本数据的保存和读取
localStorage.setItem("user_name","hangge.com");

var userName = localStorage.getItem("user_name");

(2)数值的保存和读取
localStorage.setItem("user_age",100);

var userAge = Number(localStorage.getItem("user_age"));

(3)日期的保存和读取
//创建日期对象
var today = new Date();

//按照YYY/MM/DD的标准格式把日期转换成文本字符串,然后保存为文本
var todayString = today.getFullYear() + "/" + today.getMonth() + "/" + today.getDate();
localStorage.setItem("session_started", todayString);

//取得日期文本,并基于该文本创建新的日期对象
var newToday = new Date(localStorage.getItem("session_started"));
alert(newToday.getFullYear());

(4)自定义对象的保存和读取
对象的保存和读取可以通过JSON编码转换来实现。
JSON.stringify():把任何对象连同其数据转换为文本形似。
JSON.parse():把文本转换回对象。
//自定义一个User对象
function User(n, a, t) {
	this.name = n;
	this.age = a;
	this.telephone = t;
}

//创建User对象
var user = new User("hangge", 100, "123456");
//将其保存为方便的JSON格式
sessionStorage.setItem("user", JSON.stringify(user));

//跳转页面
//window.location = "hangge.html";

//将JSON文本转回原来的对象
var user2 = JSON.parse(sessionStorage.getItem("user"));
alert(user2.name);

(5)检测某个键的值是否为空,可以直接测试是否等于null
if(localStorage.getItem("user_name") == null){
	alert("用户名不存在!");
}

(6)删除数据项
localStorage.removeItem("user_name");

(7)清除所有数据
localStorage.clear();

(8)查找所有的数据项
不知道键名,可以使用 key() 方法从本地或者会话存储中取得所有的数据项。下面样例,点击按钮后就会列出所有本地存储中的数据。
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Find All Items</title>

	<script>
		function findAllItems() {
		  //取得用于保存数据项的<ul>元素
		  var itemList = document.getElementById("itemList");
		  //清除列表
		  itemList.innerHTML = "";

		  //遍历所有数据项
		  for (var i=0; i<localStorage.length; i++) {
			//取得当前位置数据项的键
			var key = localStorage.key(i);
			//取得以该键保存的数据值
			var item = localStorage.getItem(key);

			//用以上数据创建一个列表项添加到页面中
			var newItem = document.createElement("li");
			newItem.innerHTML = key + ": " + item;
			itemList.appendChild(newItem);
		  }
		}
	</script>

<body>
	<button onclick="findAllItems()">导出所有本地存储数据</button>
	<ul id="itemList">
	</ul>
</body>
</html>

5,响应存储变化
Web存储也为我们提供了在不同浏览器窗口间通信的机制。也就是说在本地存储或会话存储发生变化时,其他查看同一页面或者同一站点中其他页面的窗口就会触发 window.onStorage 事件。
这里说的存储变化,指的是向存储中添加新数据项,修改既有数据项,删除数据项或者清除所有数据。而对存储不产生任何影响的操作(用既有键名保存相同的值,或者清除原本就是空的存储空间),不会引发 onStorage 事件。

下面同时打开两个页面,在页面1中修改数据项,页面2会响应 onStorage 事件,并报告结果。


--- page1.html ---
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page1</title>
  <style>
	fieldset {
	  margin-bottom: 15px;
	  padding: 10px;
	}

	label {
	  width: 40px;
	  display: inline-block;
	  margin: 6px;
	}

	input {
	  margin-top: 12px;
	  width: 200px;
	}
  </style>
  <script>
	function addValue() {
	  // 取得两个文本框中的值
	  var key = document.getElementById("key").value;
	  var item = document.getElementById("item").value;

	  // 在本地存储中保存数据项
	  // (如果同名键已经存在,则用新值替换旧值)
	  localStorage.setItem(key, item);
	}
  </script>

<body>
  <fieldset>
    <legend>Local Storage</legend>
    <label for="key">Key:</label>
    <input id="key"><br>
    <label for="item">Value:</label>
    <input id="item">
    <br>
    <button onclick="addValue()">Add</button>
  </fieldset>
</body>
</html>
--- page2.html ---
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page2</title>
  <style>
	#updateMessage {
	  font-weight: bold;
	}
  </style>
  <script>
	window.onload = function() {
		alert(1);
	  //给window.onStorage事件添加一个处理函数
	  window.addEventListener("storage", storageChanged, false);
	};

	function storageChanged(e) {
		alert(2);
	  var message = document.getElementById("updateMessage");
	  message.innerHTML = "Local storage updated.";
	  message.innerHTML += "<br>Key: " + e.key;
	  message.innerHTML += "<br>Old Value: " + e.oldValue;
	  message.innerHTML += "<br>New Value: " + e.newValue;
	  message.innerHTML += "<br>URL: " + e.url;
	}
  </script>
<body>
  <div id="updateMessage">No updates yet.</div>
</body>
</html>
评论0