《Javascript权威指南》学习笔记之十七：BOM新成就（1）--client存储数据（Storage实现）
版权声明：本文为博主原创文章。未经博主同意不得转载。
https://blog.csdn.net/u011043843/article/details/30255899
数据构成了web网站的实际内容。这些数据多种多样，能够是独立的文件，也能够是位于某个数据库文件或者数据库server之中。
如今，HTML 5 BOM同意在client实现较大规模的数据存储：一是web存储，二是Web SQL数据库存储。
一、Web存储概述
Web存储机制是一种通过字符串形式的key/value对来安全的存储和使用数据的方法。Web存储和HTTP Cookie的差别在于：
1、容量不同：Web存储容量大、更安全、更易于使用；Cookie存储容量有非常大的限制
2、存储的持久性也不同：Web存储是通过浏览器永久存储合理大小数据的数据方法，Cookie并没有为存储永久性的数据提供支持。
二、Web存储的类型
1、在client存储数据的类型有下面两种：
1.1 localStorage：本地存储。没有时间限制的数据存储。
1.2 sessionStorage：会话存储，针对一个会话期的数据存储。
2、在client永久存储数据--创建Storage存储
localStorage存储的数据没有时间限制，能够永久使用。
var oStorage = window.localStorage;//返回一个Storage对象，能够调用相应的方法和属性
oStorage.book = "<b>javascript权威指南</b>"; //加入键值
//window.localStorage.book = "<b>javascript权威指南</b>";
//查看键值
if(oStorage.book)
{
alert(oStorage.book);
}
else
{
alert("键值不存在");
}上图是google中的执行结果，中间图是google local storage存储的数据（ctrl+shift+i查看），下图是FF中的local storage存储的数据（ctrl+shift+k查看）
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
因为早期的FF没有显示localStorage，可是提供了globalstorage属性为指定域创建本地存储。能够用例如以下代码实现兼容：
var strDomain = "127.0.0.1";
var oStorage = window.localStorage? window.localStorage:window.globalStorage[strDomain];
var strDomain = "127.0.0.1";
try
{
var oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain];
if(oStorage.visitorCount)
{
oStorage.visitorCount = parseInt(oStorage.visitorCount,10)+1;
}
else
{
oStorage.visitorCount = 1;
}
document.write("欢迎你第<span style='font-weight:bold'>"+oStorage.visitorCount+"<\/span>次訪问");
}
catch(err)
{
alert(err.message?
err.message:err.toString());
}在Google中的执行结果
关闭浏览器后。localStorage存储仍然存在，可是sessionStorage存储仅在会话期存在。
3、在会话期存储数据---创建sessionStorage
sessionStorage针对一个Session进行的数据存储。当用户关闭浏览器后。数据就被删除。
window.sessionStorage返回当前页面会话期有效内创建的会话存储区域，仅仅要浏览器没有关闭。或者页面又一次加载或恢复。或从当前网页跳转到另外一个页面。会话一直存在。
能够利用window.sessionStorage属性返回的Storage对象调用对象方法和属性。
<form action="?
" method="?">
<input name="myName" id="myName" type="text" onblur="javascript:oStorage.myNameValue = this.value;"/>
<input name="mySubmit" type="submit"/>
</form>
<script type="text/javascript">
var oField = document.getElementById("myName");
var oStorage = window.sessionStorage;
if(oStorage.myNameValue)
{
oField.value = oStorage.myNameValue;
}
</script>
结果：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMTA0Mzg0Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />
当用户输入有误，返回此页面又一次输入时。数据就被恢复。
三、Storage接口
HTML5规范了WindowSessionStorage和WindowLocalStorage接口，分别相应于SessionStorage和Localstorage的sessionStorage与localStorage属性。二者均返回Storage对象。
1、oStorage.length属性：获取key/value对的数量。
2、oStorage.key(index)：依据索引获取键名。返回键名的字符串形式或者空字符串。
PS：加入新键值对后，索引发生变化。
3、oStorage.getItem(skey):依据键名skey获取相应的键值。
键不存在。返回null。
PS：不能从不安全URL环境（HTTP）中读取和写入安全环境（HTTPS）内定义的键。
4、oStorage.clear()：清除全部的key/value对，包含存储空间。
5、oStorage.removeItem(skey):删除指定的键值对。skey是指定的键名。能够为空
6、oStorage.setItem(skey,svalue):加入或者更新键值对。
PS：不能从不安全URL环境（HTTP）中读取和写入安全环境（HTTPS）内定义的键。
7、storage事件：当存储区域发生变化时触发。能够用window.onstorage捕捉。若目标文档不处于活动状态则不会触发storage事件。上述方法中的4~6均会触发该事件。
storage事件对象的属性：
key:表示被更改的键；oldValue：表示被更改的键的旧值。newValue：表示被更改的键的新值。url：表示发生更改所在的网址。storageArea:表示发生更改坐在的Storage对象。（onstorage仅在IE9和Opera中实现）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Storage</title>
</head>
<body style="font-family:'Microsoft YaHei','微软雅黑','SimSun','宋体'">
<button onclick="javascript:setItem('user','yk');">设置user键</button>
<button onclick="javascript:getItem('user');">显示user键</button>
<button onclick="javascript:removeItem('user');">删除user键</button>
<div id="myDiv" style="background:#EEE;width:315px;min-height:50px;padding:10px;border:2px dashed #ccc"></div>
<script type="text/javascript">
function storageHander(event)
{
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = "存储发生了变化：<br/><b>"+event.key+"</b>键改变了<br/>旧值<b>"+event.oldValue+"</b>被改变为新值<b>"+event.newValue+"</b><br/>发生改变的网址:<b>"+event.url+"</b>";
}
window.onstorage = storageHander();
var strDomain = "127.0.0.1";
var oStorage;
try
{
oStorage = window.localStorage?window.localStorage:window.globalStorage[strDomain];
}
catch(err)
{
alert(err.message?err.message:err.toString());
}
function setItem(key,value)
{
oStorage.setItem(key,value);
alert("DOM Storage:"+key+"="+value);
}
function getItem(key)
{
var myDiv = document.getElementById("myDiv");
myDiv.innerHTML = oStorage.getItem(key);
}
function removeItem(key)
{
oStorage.removeItem(key);
alert("键"+key+"被删除了");
}
</script>
</body>
</html>在IE中的执行结果：
《Javascript权威指南》学习笔记之十七：BOM新成就（1）--client存储数据（Storage实现）的更多相关文章
- JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! ## JavaScript 权威指南-学 ...
- JavaScript权威指南学习笔记6
这两天主要翻看了书中的第18-22章,重点看了第17章:事件化处理,其它几章节主要是翻了下书知道有相关的概念,没有真正理解其中的内容,或者没有考虑究竟如何能把里面的内容应用到实际的项目中.说的讽刺一点 ...
- javascript权威指南学习笔记1
打开这本书,进入到javascript的世界.以前都是看各种视频,感觉什么收获也没有,反而弄得脑袋混乱,希望能够按照这本书的节奏掌握javascript这门语言,为我的前端学习打下基础. 学习前准备: ...
- JavaScript权威指南学习笔记4
今天看了第9.10.11章,感觉收获最大还是正则表达式那章节,不过这些不用太多脑子思考,问题用到了直接查书就可以了,下面分别总结一下: 第9章类和模块:分9节,前面8节都是在讲类相关的知识,最后一节讲 ...
- Javascript权威指南学习笔记
第二章:词法结构 ;function a(){alert(2)};//前面的分号保证正确地语句解析 第三章:类型.值和变量 基本概念: 1.数据类型---能够表示并操作的值的类型叫做数据类型. 2.变 ...
- javascript权威指南学习笔记3
今天看到第四章,记录一下其中的几个点,俗话说:好记性不如烂笔头嘛. 4.9 in运算符和instanceof运算符 in运算符希望它的左操作数是一个字符串或可以转化为字符串,希望它的右操作数是一个 ...
- javascript权威指南学习笔记2
Javascript语言核心(2~12章) 第三章:类型.值.变量 1.数字: overflow(Infinity, -Infinity).underflow(+0,-0) 非数字值:它和任何值都不相 ...
- JavaScript权威指南学习笔记5
下午在杭图回去前看了书中第二部分的13-17章,看的很粗,感觉大部分东西自己已经知道或者平时开发中不会用到,很多章节只是简单的翻了一下,没有仔细思考里面说到的道理,下面对各章节简单的记录下. 第13章 ...
- HTTP权威指南-学习笔记
目录 HTTP权威指南-学习笔记 HTTP: Web的基础 URL与资源 HTTP报文 连接管理 HTTP结构 Web服务器 代理 缓存 集成点: 网关,隧道及中继 Web机器人 识别,认证与安全 客 ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
随机推荐
- Python字符串前缀
1,r/R表示raw string(原始字符串) #!/usr/bin/python str1 = 'hello \n world' str2 = r'hello \n world' print(st ...
- 强烈推荐一款功能强大的Tomcat 管理监控工具
专注于Java领域优质技术号,欢迎关注 原创: 侯树成 Tomcat那些事儿 启动 Tomcat完毕 ,有些时候总会打开浏览器 http://localhost:8080/ 去验证你的Tomcat是否 ...
- ASP.NET Core 2.1 JWT token (一) - 简书
原文:ASP.NET Core 2.1 JWT token (一) - 简书 JwtBearer认证是一种标准的,通用的,无状态的,与语言无关的认证方式.Bearer验证属于HTTP协议标准验证. 如 ...
- kubernetes（k8s）容器集群管理
Kubernetes介绍 Kubernetes是google在2014年6月开源的一个容器集群管理系统,使用go语言开发,Kubernetes也称k8s. k8s是google内部一个叫borg的容器 ...
- border-radius使用的一些问题（不起作用？）
出现这种问题,border-radius没有达到自己想要的效果(小程序中) 原因:border-radius定义了border的圆角,未定义span元素的圆角范围 解决:不设置border,则bord ...
- ng2-file-upload插件在ionic3中的使用方法
本文主要说明在ionic3中使用ng2-file-upload插件,上传多种类型文件(图片.word.excel.ppt.mp4等)的使用方法. 1.html代码: <button ion-bu ...
- mysql创建用户账号出错
在数据库中输入“create user 'tom'@'%' identified by '123456';”时,出现“ERROR 1819 (HY000): Your password does no ...
- Paint的Gradient的用法（转）
转自:https://www.jianshu.com/p/02b02c1696b2 Paint的Gradient的用法 嗯哼嗯哼嗯哼嗯哼 关注 2017.07.04 15:45* 字数 173 阅读 ...
- Nginx有哪些作用？
Nginx有哪些作用? http协议代理 搭建虚拟主机 服务的反向代理 在反向代理中配置集群的负载均衡 什么是正向代理? 正向代理,意思是一个位于客户端和原始服务器(origin server)之 ...
- mongoose 与 mylab 的使用 （1）
1.引入mongoose 模块 const mongoose = require('mongoose'); 2.连接数据库 //连接数据库 mongoose.connect( db, {useNew ...