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
*************
****************如果（!!存储）*************

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