web存储 - 爱码网

本地存储之webstorage

浏览器的数据存储除了cokie，H5又新添加了两种网络存储方式，一个是sessionStorage的的的，另一个就是localStorage的的的。

概念及生命周期：

的sessionStorage的针对一个会话的数据存储，关闭浏览器数据消失。

localStorage的的的没有时间限制的数据存储。

两种存储方法都提供了存储，删除等接口：

HTML：

<DIV> 
	<P>提示信息：<SPAN ID = “信息”> </ SPAN> </ P> 
	<！ -会话- > 
	<DIV> 
		<INPUT TYPE = “文本” ID = “username”的占位符= “用户名”/> <br /> 
		<input type =“text”id =“delName”placeholder =“要删除的数据名称”/> <br /> 
		<button id =“save”>保存</ button> 
		<button id =“show”>显示</ button> 
		<button id =“del”>删除</ button> 
		<button id =“delAll”>删除所有数据</ button> 
	</ div> 
	<！ -  local - > 
	<div> 
		<input type =“text”id =“userNameL”placeholder =“用户名”/> <br /> 
		<input type =“text“id =”delNameL“placeholder =”要删除的数据名称“/> <br /> 
		<button id =”saveL“>保存</ button> 
		<button id =”showL“>显示</ button> 
		<button id =“delL”>删除</ button> 
		<button id =“delAllL”>删除所有数据</ button> 
	</ div>
	<div id =“con”> </ div> 
</ div>

的的sessionStorage的实例：

//存储提示信息
  var info = $（“＃info”）;
//显示结果
  var con = $（“＃con”）;
//获取存储数据，如果存在则显示
var username = sessionStorage.getItem（'userName'）; 
如果（!!用户名）{ 
	con.html（用户名）; 
} 


//数据显示
function show（）{ 
	var username = sessionStorage.getItem（'userName'）; 
	con.html（用户名）; 
} 


//存储
$（“＃save”）。on（“click”，function（）{ 
	var username = $（“＃userName”）.val（）; 
	sessionStorage.setItem（'userName'，username）; 
	info。 html（'存储成功！'）; 
	show（）; 
}）; 
//显示
$（“＃show”）。on（“click”，function（）{ 
	show（）; 
}）; 


（删除id为delName文本框指定的键名的数据
$（“＃del”）。on（“click”，function（）{ 
	var delName = $（“＃delName”）。VAL（）; 
	sessionStorage.removeItem（delName）; 
	显示（）;
}）; 
//删除所有数据
$（“＃delAll”）on（“click”，function（）{ 
	sessionStorage.clear（）; 
	show（）; 
}）;

localStorage的的实例：

//存储提示信息
  var info = $（“＃info”）;
//显示结果
  var con = $（“＃con”）;
//获取存储数据，如果存在则显示
var usernameL = localStorage.getItem（'userNameL'）; 
if（!! usernameL）{ 
	con.html（usernameL）; 
} 


//数据显示
function showL（）{ 
	var usernameL = localStorage.getItem（'userNameL'）; 
	con.html（usernameL）; 
} 


//存储
$（“＃saveL”）。on（“click”，function（）{ 
	var usernameL = $（“＃userNameL”）.val（）; 
	localStorage.setItem（'userNameL'，usernameL）; 
	info。 html（'存储成功！'）; 
	showL（）; 
}）; 
//显示
$（“＃showL”）on（“click”，function（）{ 
	showL（）; 
}）; 


（删除id为delNameL文本框指定的键名的数据
$（“＃delL”）。on（“click”，function（）{ 
	var delNameL = $（“
	
	showL（）; 
}）; 
//删除所有数据
$（“＃delAllL”）on（“click”，function（）{ 
	localStorage.clear（）; 
	showL（）; 
}）;

****************在使用Web存储前，应检查浏览器是否支持localStorage和sessionStorage *************

****************如果（!!存储）*************

本地数据库!!!!!明天再记录~~~~~