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）删除数据项

1	`localStorage.removeItem(` `"user_name"` `);`

（7）清除所有数据

1	`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>

原文出自： www.hangge.com 转载请保留原文链接： http://www.hangge.com/blog/cache/detail_1066.html

HTML5 - Web存储使用详解（本地存储、会话存储）相关推荐

android增加内置存储分区,详解Android10的分区存储机制(Scoped Storage)适配教程
1. 简介大家应该都有过这样的体会,手机用着用着里面就充斥着各种不懂的文件夹和文件.甚至是连已经删除的软件的文件夹还存在. 为什么会发生的这样的问题呢? 因为google的缺席,导致android生 ...
kubernetes系列10—存储卷详解
kubernetes系列10-存储卷详解 1.认识存储卷 1.1 背景默认情况下容器中的磁盘文件是非持久化的,容器中的磁盘的生命周期是短暂的,这就带来了一系列的问题:第一,当一个容器损坏之后,kub ...
HTML5本地存储使用详解
HTML5本地存储使用详解前言随着Web应用的发展,需要在用户本地浏览器上存储更多的应用数据,传统的cookie存储的方案已经不能满足发展的需求,而使用服务器端存储的方案则是一种无奈的选择.HTM ...
html5离线存储图片,HTML5教程离线存储技术详解
本篇教程探讨了HTML5教程离线存储技术详解,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < 随着Web App的发展,越来越多的移动端App使用HTML5 ...
Mysql存储引擎详解(MyISAM与InnoDB的区别)
Mysql存储引擎详解(MyISAM与InnoDB的区别) 存储引擎 MySQL中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平 ...
浏览器对象存储数据详解
浏览器对象存储数据详解前言随着需求的发展,浏览器的功能正变的越来越强大,在本地存储数据可以极大的方便人们进行各种操作,如localStroage/sessionStroage等,下面我就记录在项目 ...
Kubernetes K8S之存储Volume详解
K8S之存储Volume概述与说明,并详解常用Volume示例主机配置规划服务器名称(hostname) 系统版本配置内网IP 外网IP(模拟) k8s-master CentOS7.7 2C ...
mysql数据库存储引擎和索引的描述_Mysql InnoDB引擎的索引与存储结构详解
前言在Oracle 和SQL Server等数据库中只有一种存储引擎,所有数据存储管理机制都是一样的. 而MySql数据库提供了多种存储引擎.用户可以根据不同的需求为数据表选择不同的存储引擎,用户也 ...
数据结构图，图存储结构详解
1. 数据结构的图存储结构我们知道,数据之间的关系有 3 种,分别是 "一对一"."一对多" 和 "多对多",前两种关系的数据可分别用线性 ...

HTML5 - Web存储使用详解（本地存储、会话存储）

HTML5 - Web存储使用详解（本地存储、会话存储）相关推荐

最新文章

热门文章