【html5】Web存储_locaStorage对象的应用
Web存储
html5可以在本地存储用户浏览的数据，数据的存储原理是以 键/值 存储的
存储对象分类
- localStorage：没有时间限制的数据存储
- sessionStorage：针对一个会话的数据存储
常用的API
（以localStorage为例，sesstionStorage同理）
- 保存数据：localStorage.setIterm(key,value);
- 读取数据：localStorage.getIterm(key);
- 移除单个数据：localStorage.removeIterm(key);
- 移除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);
- 点击计数：localStorage.clickcount();
实例（能够记忆用户的密码和账号）：
<!DOCTYPE html>
<html>
<head>
<title>登 录 页 面</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
div{border:2px groove #ddd};
</style>
</head>
<body onload = "loadAll()">
<form action = "afterlogin.jsp">
<div>
name:<input type = "text" name = "user" id = "user" onblur = "read()"><br>
password:<input type = "password" name = "pw" id = "pw"><br>
<input type = "checkbox" onclick = "choice()" name = "rem" id = "rem"><span id = "res">永远记住我</span><br>
</div>
<br>
登录：<input type = "image" src = "nexview.gif" width = "20px" height = "20px"alt = "Submit" title = "Submit" onclick= "save()">
</form>
<br>
<button onclick = "count()">点我</button>计数：<span id = "count"></span>
<div id = "list"></div>
<script>
function count(){
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("count").innerHTML="你已经点击了该按钮 " + localStorage.clickcount + " 次 ";
}
else
{
document.getElementById("count").innerHTML="抱歉，您的浏览器不支持 web 存储";
}
}
function choice(){
var cb = document.getElementById("rem");
if(cb.value != "1"){
cb.value = "1";
document.getElementById("res").innerHTML = "忘记我";
}else{
cb.value = "0";
document.getElementById("res").innerHTML = "永远记住我";
}
}
function save(){
//判断用户是否选择了记住用户名和密码
if(document.getElementById("rem").value = "1"){
//创建一个对象
var info = new Object;
//获得用户输入的值
info.user = document.getElementById("user").value;
info.pw = document.getElementById("pw").value;
//将对象转化为字符串
var str = JSON.stringify(info);
//将数据存储到localStorage中
localStorage.setItem(info.user,str);
}
}
function read(){
//获得用户输入的名称
var user = document.getElementById("user").value;
//通过用户用户名获得存储数据的对象
var str = localStorage.getItem(user);
//将对象转化为字符串
var sstr = JSON.parse(str);
var spw = document.getElementById("pw");
spw.value = sstr.pw;
}
//将所有存储在loadStorage中的对象提取出来
function loadAll(){
var list = document.getElementById("list");
if(localStorage.length>0){
var result = "<table border='1'>";
result += "<tr><td>用户</td><td>密码</td></tr>";
for(var i=0;i<localStorage.length;i++){
//依次获得每一个对象
var user = localStorage.key(i);
var str = localStorage.getItem(user);
//将对象转化为字符串
var sstr = JSON.parse(str);
result += "<tr><td>"+user+"</td><td>"+sstr.pw+"</td></tr>";
}
result += "</table>";
list.innerHTML = result;
}else{
list.innerHTML = "数据为空...";
}
}
</script>
</body>
</html>Web存储和jsp内置对象简单比较
相同点：
- 都可以作为一个容器来存网页中的数据
不同点：
- Web存储用于HTML（静态网页）中，而JSP内置对象用于jsp（动态网页）中。
- Web存储只有两种类型（localStorage、sessionStorage）， JSP的内置对象有十多个（application、session、request、config、exception、out、response、pageContext、page…..）。
【html5】Web存储_locaStorage对象的应用的更多相关文章
- HTML5 Web存储(Web Storage)技术及用法
在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...
- HTML5 web 存储
简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...
- HTML5 Web存储 页面间进行传值
在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...
- 面试之HTML5 Web存储
前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...
- HTML5: HTML5 Web 存储
ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...
- 有趣的HTML5 Web 存储
HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- HTML5本地化应用开发-HTML5 Web存储详解
文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...
- HTML5 web存储
既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...
随机推荐
- SVN更改登录用户
如果装了TortoiseSVN: Settings -> Saved Data -> Authentication Data -> clear.即可清除保存的上个用户登录信息:当再次 ...
- Cocos2d-x 3.2 学习笔记（十二）TimberMan！疯狂伐木工！
学习cocos2dx有一段时间了,试着做了2048游戏,最近又发现个经典游戏,啥也不说果断开工做自己的游戏——TimberMan! 首先说明:游戏资源摘自同类游戏,感谢这些游戏的资源让我完成自己的开发 ...
- 邻接表有向图(一)之 C语言详解
本章介绍邻接表有向图.在"图的理论基础"中已经对图进行了理论介绍,这里就不再对图的概念进行重复说明了.和以往一样,本文会先给出C语言的实现:后续再分别给出C++和Java版本的实现 ...
- [Node.js] DSL in action
原文地址:http://www.moye.me/2015/05/30/dsl-in-action/ 最近看了本有意思的书,受到了一些启发,在此记录一下: DSLs in action DSL是什么 ...
- Cordova webapp实战开发：（7）如何通过简单的方法做到，不重新发布APP来修复bug、增加功能、或者躲开苹果的一些严格审核？
到<Cordova webapp实战开发:(6)如何写一个iOS下获取APP版本号的插件?>为止,我们已经大体学会了如何使用Cordova了,那些都是使用Cordova的开发者必备的技能. ...
- Windows Azure Traffic Manager (6) 使用Traffic Manager，实现本地应用+云端应用的高可用
<Windows Azure Platform 系列文章目录> 注意:本文介绍的是使用国内由世纪互联运维的Azure China服务. 以前的Traffic Manager,背后的Serv ...
- nodejs学习笔记三——nodejs使用富文本插件ueditor
在做自己的nodejs项目的时候遇到需要使用ueditor.原来下载的是ueditor的jsp版本.目录如下 在ueditor.config.js中有配置服务器home路径(这个home路径能找到u ...
- 关于HttpHandler的相关知识总结
一.关于IHttpHandler.IsReusable 很多人不明白,这哥们到底干嘛的,估计是微软最初的一个想法--让一个对象可以一直不断地被重复使用 ,但这个想法不成熟,会带来很多隐藏问题,一个对象 ...
- 倍数提高工作效率的 Android Studio 奇技
来源:JeremyHe 链接:http://zlv.me/posts/2015/07/13/14_android-studio-tips/ 这是从Philippe Breault的系列文章<An ...
- 炉石传说 C# 开发笔记（BS模式Demo）
原来这个项目,一直想做成CS模式的,BS模式对于炉石这样的游戏来说比较困难. 暴雪到现在也只出了 Windows 和 iPad版本的炉石,最大的问题还是在于如何在小屏幕下,实现最佳的客户体验. Win ...