在html5中除了canvas，另外一个非常重要的功能是客户端本地存储web storage，之前可以在用户端Cookies存贮用户名等信息，后来发现Cookies存储存在以下问题：
大小：Cookies的大小被限制在4kb左右
带宽：Coolies是随着Http业务被一起发送的，因此会浪费一部分带宽
复杂性：要正确的操作Cookies是很苦难的
针对以上问题，html5提出了一种在本地保存数据的方法：web storage
它有两种处理方式：
session storage：将数据保存在session对象中。session是用户打开这个网站到关闭这个网站，所经历的时间，也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。
local storage：将数据保存在客户端的硬件（硬盘）中，即使用户的浏览器关闭了。下次打开时候，也会重新加载
session storage实例
index.html代码
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格提交</title>
<script src="appWeb.js"></script></head><body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>登录后复制
登录后复制
appWeb代码
/**
* Created by joy liu on 2015/9/22.
*/function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
sessionStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}登录后复制
登录后复制
！！！！效果图
local storage的实例
index代码没变，js代码
/**
* Created by joy liu on 2015/9/22.
*///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
localStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message");
target.innerHTML = msg;
}登录后复制
登录后复制
效果图
在html5中除了canvas，另外一个非常重要的功能是客户端本地存储web storage，之前可以在用户端Cookies存贮用户名等信息，后来发现Cookies存储存在以下问题：
大小：Cookies的大小被限制在4kb左右
带宽：Coolies是随着Http业务被一起发送的，因此会浪费一部分带宽
复杂性：要正确的操作Cookies是很苦难的
针对以上问题，html5提出了一种在本地保存数据的方法：web storage
它有两种处理方式：
session storage：将数据保存在session对象中。session是用户打开这个网站到关闭这个网站，所经历的时间，也就是用户浏览网站的时间。session对象可以保存这段时间所有的数据。
local storage：将数据保存在客户端的硬件（硬盘）中，即使用户的浏览器关闭了。下次打开时候，也会重新加载
session storage实例
index.html代码
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格提交</title>
<script src="appWeb.js"></script></head><body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')"></body></html>登录后复制
登录后复制
appWeb代码
/**
* Created by joy liu on 2015/9/22.
*/function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
sessionStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = sessionStorage.getItem("message");
target.innerHTML = msg;
}登录后复制
登录后复制
！！！！效果图
local storage的实例
index代码没变，js代码
/**
* Created by joy liu on 2015/9/22.
*///function saveStorage(id){// var target = document.getElementById(id);// var string = target.value;// sessionStorage.setItem("message",string);//}//function loadStorage(id){// var target = document.getElementById(id);// var msg = sessionStorage.getItem("message");// target.innerHTML = msg;//}function saveStorage(id){ var target = document.getElementById(id); var string = target.value;
localStorage.setItem("message",string);
}
function loadStorage(id){ var target = document.getElementById(id); var msg = localStorage.getItem("message");
target.innerHTML = msg;
}登录后复制
登录后复制
效果图
以上就是Html5的学习之旅-Html5的web Storage概述（16）的内容，更多相关内容请关注PHP中文网（www.php.cn）！
