认识H5中Web Storage
认识h5中Web Storage
1. Cookie和Web Storage
h5中Web Storage翻译理解就是“数据存储”，这是h5新增的重要功能之一，它可以快速方便的存储和读取数据。
h5本地存储前身是Cookie，使用Cookie对象存储数据是一种简单而且兼容最佳的方案，但是它有一下的缺点：
- 大小受限制，Cookies大小被限制在4KB。
- Cookie会随着事物一块发送，浪费带宽。
- Cookie所有的信息都要被放到一个长字符串中，操作比较麻烦。
- Cookie在相同的站点与多事务处理保持联系不容易。
Web Storage的优点：
- 存储空间更大，默认情况下，Web Storage大小可以存储5MB，不同浏览器支持的数据大小不同。
- Web Storage存储的内容不会发送到服务器，它的数据仅保存在本地。
- Web Storage提供了更丰富易用的接口，操作数据更方便。
- Web Storage拥有独立的空间，每个域包括子域都有独立的存储空间，不会造成数据混乱。
Web Storage的缺点：
浏览器给每个域分配了独立的空间，但是浏览器却不会检查脚本所在的域是否相同。
Web Storage的数据永远不会过期，极易造成隐私泄露。
2. localStorage对象
localStorage对象常用的方法：
setItem(key,value) ，保存数据，需要2个参数：key，value都是字符串类型。
getItem(key) ，读取数据，需要的参数：key，setItem方法中保存的，返回指定key的存储内容，不存在则返回null。
removeItem(key) ，删除数据，需要的参数：key。
clear() ，清空所有的数据。
key(n) ，获取指定下标的键的名称。
length ，获得当前localStorage对象中的数目。
localStorage的存储周期是存在于浏览器的缓存中的，也就是说下次用同一个浏览器打开页面，存储的内容还在。
localStorage对象使用示例：
//判断浏览器是否支持localStorage
function getLocalStorage(){
try{
if(!! window.localStorage ){
return window.localStorage;
}
}catch(e){
return undefined;
}
}
//获取localStorage对象
var localStorage = getLocalStorage();
//存储数据（两种方法）
localStorage.setItem("name","Cynthia"); //方法一
localStorage.setItem("age","21");
localStorage.hobby = "sing"; //方法二
//获取保存的数据（两种方法）
console.log(localStorage.name + " 今年" + localStorage.age + ",她喜欢 " + localStorage.hobby);
console.log(localStorage.getItem("name") + " 今年" + localStorage.getItem("age") + ",她喜欢 "+ localStorage.getItem("hobby"));
//调用key()方法获取指定下标的名称的值
var value0 =localStorage.key(0);
console.log(value0);
//删除某个指定的数据
localStorage.removeItem("hobby");
console.log(localStorage.getItem("name") + " 今年" + localStorage.getItem("age") + " ,她喜欢 "+ localStorage.getItem("hobby"));
//清空当前所有保存的数据
localStorage.clear();
console.log(localStorage.getItem("name") + " 今年" + localStorage.getItem("age") + " ,她喜欢 "+ localStorage.getItem("hobby"));3. JSON对象
JSON： javaScript Object Notation的缩写，是一种将对象与字符串可以相互表示的数据转换标准，也一直是通过HTTP将对象从浏览器传送到服务器的一种常用格式。
最常用的方法：
JSON.parse(data) ，这个方法返回一个装载data数据的JSON的对象，参数data表示从Web Storage相关对象中所获取的数据。
JSON.stringify(obj) ，这个方法返回一个由实体对象转换成JSON格式的文本数据集，参数obj表示一个任意的实体对象。
4. sessionStorage对象
sessionStorage对象常用属性、方法、事件：与localStorage对象都一样。
sessionStorage的存储周期是当前页面，也就是说，关闭了页面之后就不存在了。
localStorage对象和sessionStorage对象对比使用示例：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>localStorage和sessionStoragetitle>
head>
<body>
用户名：<input type="text" name="user" id="user" size="24" maxlength="12">
密 码：<input type="password" name="pass" id="pass" size="24" maxlength="16">
<script>
//判断浏览器是否支持localStorage
function getLocalStorage(){
try{
if(!! window.localStorage ){
return window.localStorage;
}
}catch(e){
return undefined;
}
}
//判断浏览器是否支持seesionStorage
function getSessionStorage(){
try{
if(!! window.sessionStorage){
return window.sessionStorage;
}
}catch(e){
return undefined;
}
}
var sessionStorage = getSessionStorage(); //获取sessionStorage对象
var localStorage = getLocalStorage();
var oUser = document.getElementById('user'); //获取同户名对象
var oPass = document.getElementById('pass'); //获取密码对象
oUser.value = localStorage.getItem('userName');
oPass.value = sessionStorage.getItem('userPass');
oUser.onkeyup = function(){
localStorage.setItem("userName",this.value);
}
oPass.onkeyup = function(){
sessionStorage.setItem("userPass",this.value);
}
script>
body>
html>5. 实例
（1）使用localStorage对象实现：统计访问某个页面的总次数
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LocalStrage3title>
<style>
#showNumber{
position: absolute;
margin-top: 50px;
margin-left: 250px;
font-size: 18px;
}
style>
head>
<body>
<span id="showNumber">
访问人数显示
span>
<script>
//判断浏览器是否支持localStorage
function getLocalStorage(){
try{
if(!! window.localStorage ){
return window.localStorage;
}
}catch(e){
return undefined;
}
}
//统计访问当前页面的人数
function ShowVisitedNumber(){
var localStorage1 = getLocalStorage();
if(localStorage1.getItem("countNumber")){ //判断countNumber属性值是否为空，不为空则将当前访问的次数加1，否则置为1
localStorage1.setItem("countNumber",Number(localStorage1.getItem("countNumber")) + 1 );
}else{
localStorage1.setItem("countNumber",1);
}
document.getElementById("showNumber").innerHTML = "当前页面被访问的次数为："+localStorage1.getItem("countNumber");
}
//及时更新页面被访问的次数
function storageHandler(e){
if(!e){
e=window.event;
}
document.getElementById("showNumber").innerHTML = "存储发生了变化："+e.key+"键改变了。旧值："+e.oldValue+
"被改变为新值"+e.newValue+"
发生改变的网址为："+e.url+"";
}
if(window.addEventListener){
window.addEventListener("storage",storageHandler,false);
}else{
window.attachEvent("onstorage",storageHandler);
}
window.onload = ShowVisitedNumber;
script>
body>
html>（2）使用JSON和localStorage对象完成：联系人的添加和检索的操作
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>联系人数据的保存和读取title>
head>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="table1" align="">
<thead>
<tr>
<td>联系人姓名td>
<td>手机号码td>
<td>所属群组td>
tr>
thead>
<tbody id="contactListBody">
tbody>
table>
<button id="addPerson" onclick="Add()">添加联系人button>
<button id="searchPerson" onclick="Search()">检索联系人button>
<div id="addInfo" style="display: none;">
<table>
<tr>
<td height="30">姓名：td>
<td>
<input type="text" id="MoblieName">
td>
tr>
<tr>
<td height="30">电话：td>
<td>
<input type="text" id="MobliePhone">
td>
tr>
<tr>
<td height="30">分组：td>
<td>
<select name="" id="MoblieGroup">
<option value="默认">默认option>
<option value="家人">家人option>
<option value="同学">同学option>
<option value="朋友">option>
select>
td>
tr>
<tr>
<td colspan="2" height="30">
<button onclick="AddMobilePerson()">确认添加button>
td>
tr>
div>
<div id="searchInfo" style="display: none">
输入联系电话：<input type="text" id="searchByMobilePhone" placeholder="正确的联系电话">
<button onclick="SearchMobliePerson()">查找button>
<span id="searchContent">span>
div>
body>
<script>
window.onload = Init;
function Init(){ //初始化联系人列表
localStorage.clear(); //清空localStorage对象中的内容
var data1 = new Object; //创建一个Object对象
data1.personName = "Cynthia";
data1.personPhone = "15829104582";
data1.personGroup = "家人";
localStorage.setItem(data1.personPhone,JSON.stringify(data1)); //保存数据，JSON对象的stringify（）返回文本数据集
GetPersonList(); //加载显示联系人列表
}
function GetPersonList(){ //获取存储在locaStorage对象中的数据列表
var strHTML = "";
for(var i=0; ivar datakey = localStorage.key(i);
//调用parse()方法获取JSON对象,将所有读取的数据保存到变量strHTML中
var data = JSON.parse(localStorage.getItem(datakey));
strHTML += "";
strHTML += "" + data.personName + " ";
strHTML += "" + data.personPhone + " ";
strHTML += "" + data.personGroup + " ";
strHTML += " ";
}
strHTML += " ";
document.getElementById('contactListBody').innerHTML = strHTML;
}
function Add(){ //添加联系人，出现添加的联系人信息填写
document.getElementById('addInfo').style.display = "inline";
document.getElementById('searchInfo').style.display = "none";
}
function Search(){ //搜索联系人，出现搜索的结果
document.getElementById('searchInfo').style.display = "inline";
document.getElementById('addInfo').style.display = "none";
}
function AddMobilePerson(){ //确认添加，将信息添加到列表
var data = new Object; //创建一个js对象，用于存放当前从表单获得的数据
data.personName = document.getElementById('MoblieName').value;
data.personPhone = document.getElementById('MobliePhone').value;
data.personGroup = document.getElementById('MoblieGroup').value;
var str = JSON.stringify(data); //把JSON对象存放到localStorage上，key为用户输入的用户名，vlaue为这个JSON字符串
localStorage.setItem(data.personPhone,str);
GetPersonList();
document.getElementById('MoblieName').value = "";
document.getElementById('MobliePhone').value = "";
document.getElementById('MoblieGroup').selectedIndex = 0;
}
function SearchMobliePerson(){
var searchphone = document.getElementById('searchByMobilePhone').value;
var searchStr = localStorage.getItem(searchphone);
if(searchStr == null){
document.getElementById('searchContent').innerHTML = "很抱歉,没有找到您要的联系人。";
}else{
var searchData = JSON.parse(searchStr);
var searchResult = "
联系人姓名; " + searchData.personName + "
联系人电话： " + searchData.personPhone
+ "
所属分组： " + searchData.personGroup;
document.getElementById('searchContent').innerHTML = searchResult;
}
}
script>
html>