HTML5--Web存储
2016-12-19 20:54
411 查看
使用HTML5可以在本地存储用户的浏览数据,而不影响网站的性能,数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
1.localStorage 和 sessionStorage
客户端存储数据的两个对象为:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}2.localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。
3.sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
4.Web Storage 开发一个简单的网站列表程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="keyname">别名(key):</label>
<input type="text" id="keyname" name="keyname" class="text"/>
<br/>
<label for="sitename">网站名:</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">网 址:</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入网站名:</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
//保存数据
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.keyname,str);
alert("保存成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str); //将字符串转换为JSON对象
find_result.innerHTML = search_site + "的网站名是:" + site.sitename + ",网址是:" + site.siteurl;
}
//将所有存储在localStorage中的对象提取出来,并展现到界面上
// 确保存储的 keyname 对应的值为转换对象,否则JSON.parse会报错
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";
for(var i=0;i<localStorage.length;i++){
var keyname = localStorage.key(i);
var str = localStorage.getItem(keyname);
var site = JSON.parse(str);
result += "<tr><td>"+site.keyname+"</td><td>"+contact.sitename+"</td><td>"+contact.siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空...";
}
}
</script>
</body>
</html>
1.localStorage 和 sessionStorage
客户端存储数据的两个对象为:
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
if(typeof(Storage)!=="undefined")
{
// 是的! 支持 localStorage sessionStorage 对象!
// 一些代码.....
} else {
// 抱歉! 不支持 web 存储。
}2.localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
// 存储 localStorage.sitename = "Web存储"; // 查找 document.getElementById("result").innerHTML = localStorage.sitename;localStorage和sessionStorage使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。
3.sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
4.Web Storage 开发一个简单的网站列表程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储之Web Storage篇</title>
</head>
<body>
<div style="border: 2px dashed #ccc;width:320px;text-align:center;">
<label for="keyname">别名(key):</label>
<input type="text" id="keyname" name="keyname" class="text"/>
<br/>
<label for="sitename">网站名:</label>
<input type="text" id="sitename" name="sitename" class="text"/>
<br/>
<label for="siteurl">网 址:</label>
<input type="text" id="siteurl" name="siteurl"/>
<br/>
<input type="button" onclick="save()" value="新增记录"/>
<hr/>
<label for="search_phone">输入网站名:</label>
<input type="text" id="search_site" name="search_site"/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"><br/></p>
</div>
<br/>
<div id="list">
</div>
<script>
//保存数据
function save(){
var site = new Object;
site.keyname = document.getElementById("keyname").value;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.keyname,str);
alert("保存成功");
}
//查找数据
function find(){
var search_site = document.getElementById("search_site").value;
var str = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
var site = JSON.parse(str); //将字符串转换为JSON对象
find_result.innerHTML = search_site + "的网站名是:" + site.sitename + ",网址是:" + site.siteurl;
}
//将所有存储在localStorage中的对象提取出来,并展现到界面上
// 确保存储的 keyname 对应的值为转换对象,否则JSON.parse会报错
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>别名</td><td>网站名</td><td>网址</td></tr>";
for(var i=0;i<localStorage.length;i++){
var keyname = localStorage.key(i);
var str = localStorage.getItem(keyname);
var site = JSON.parse(str);
result += "<tr><td>"+site.keyname+"</td><td>"+contact.sitename+"</td><td>"+contact.siteurl+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空...";
}
}
</script>
</body>
</html>
相关文章推荐
- HTML5--语义元素
- HTML5—浏览器支持问题
- ElasticSearch5.1.1集群部署
- HTML5--表单属性
- Oozie-4.0.0-cdh5.3.6搭建
- HTML5学习随笔02
- HTML5基础(样式、链接、表格)
- HTML5--表单元素
- HTML5游戏源码《贪吃蛇》
- HTML5--Input类型
- HTML5基础(声明、标签、元素、属性、格式化)
- HTML5就是现在:深入了解Polyfills
- HTML5综述
- HTML5+通讯录获取指定多个人的信息
- HTML5--Audio(音频)
- 2017年营销行业八大趋势预测,H5居然...
- HTML5--Video(视频)
- H5 ajax递交带有file的form表单
- html5下划手机屏幕,实现数据加载
- HTML5--Geolocation(地理定位)