javascript中本地储存、离线缓存、地理定位、网络状态

本地储存：

实际开发中某些内容是不需要放到服务器中，而是放到了浏览器中，需要的时候可以快速的访问，甚至页面刷新也可能不会丢失数据，容量较大；这里介绍两种数据存储方式：sessionStorage约5M大小、localStorage约20M大小。其缺点是只能储存字符串，因此要使用JSON.stringify()编译后储存。

1.window.sessionStrage：关闭浏览器窗口为一个生命周期，在同一个页面下任何地方可以访问此数据，以键值对的方式存储数据。sessionStorage.setItem(key,value)存储数据；sessionStorage.getItem(key)获取某个键的值；sessionStorage.removeItem(key)移除某个键和值；sessionStorage.clear()清空所有的键值对，如：

	<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="text" placeholder='输入key'><input type="text" placeholder='输入value'><input type="button" value='储存'><input type="button" value='删除'><input type="button" value='清空'><p></p></body><script>var inputs = document.querySelectorAll('input');var p = document.querySelector('p');function getvalue() {p.innerHTML = sessionStorage.getItem(inputs[0].value);};inputs[2].addEventListener('click', function() {sessionStorage.setItem(inputs[0].value, inputs[1].value);getvalue();});inputs[3].addEventListener('click', function() {sessionStorage.removeItem(inputs[0].value);});inputs[4].addEventListener('click', function() {sessionStorage.clear();});</script></html>

2.window.localStorage:生命周期永久（除非手动删除），可以在多个页面使用（同一浏览器下），以键值对形式储存，localStorage.setItem(key,value)存储数据；localStorage.getItem(key)获取某个键的值；localStorage.removeItem(key)移除某个键和值；localStorage.clear()清空所有的键值对，如：

	<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><input type="text" placeholder='输入key'><input type="text" placeholder='输入value'><input type="button" value='储存'><input type="button" value='删除'><input type="button" value='清空'><p></p></body><script>var inputs = document.querySelectorAll('input');var p = document.querySelector('p');function getvalue() {p.innerHTML = localStorage.getItem(inputs[0].value);};inputs[2].addEventListener('click', function() {localStorage.setItem(inputs[0].value, inputs[1].value);getvalue();});inputs[3].addEventListener('click', function() {localStorage.removeItem(inputs[0].value);});inputs[4].addEventListener('click', function() {localStorage.clear();});</script></html>

离线缓存：

在html5中可以构建一个离线应用，其方法是创建一个cache manifest文件即可。其作用是将需要无网络情况加载的资源缓存下来供离线使用，同时提升访问速度来增加用户体验，减少请求提高性能。

缓存清单：一个以.appcache为后缀名的文件，用来配置缓存资源的，其文件格式如下：

1.顶行输入： CACHE MANIFEST

2.CACHE： 此命令输入后换行配置需要缓存的静态资源，如图片，代码文件等，此命令可以省略，但是需要将资源写在CACHE MANIFEST，同时可以指定多个CACHE。

3.NETWORK： 此命令输入后换行配置需要在线访问的资源。

4.FALLBACK： 此命令输入后换行配置当缓存的文件找不到时备用的资源。

	CACHE MANIFEST#下面是配置需要缓存的资源：CACHE:./images/1.jpg./images/3.jpg./images/4.jpg./images/5.jpg#下面是配置需要网络才可以加载的资源：NETWORK:./images/1.jpg./images/3.jpg#下面是当资源请求失败时需要替换的资源，前面是原资源 空格 需要替换的资源FALLBACK:./images/1.PNG ./images/2.PNG

引入appcache文件：将appcache文件通过html标签配置到文件：

	<html  manifest="appcache文件的URL"></html>

调试是否配置成功：chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存；在appache文件中#表示注释，当appache文件内容发生改变或手动清除时，才会重新缓存。

geolocation地理定位：

在html5中增加了获取地理定位的API，即基于位置的服务（Location Base Service）,由于国内政策的影响，geolocation在使用的过程中会发生网络阻塞，这个是无法避免的；

geolocation是navigator导航的一个属性，若想要获取定位，那么就得通过navigator调用geolocation属性，geolocation属性下面有两个方法：getCurrentPosition()一次获取当前定位信息、watchPositionget(callback,callback)重复获取定位信息；

这两个方法都可以传相同的三个参数，前两个是回调函数作为参数，第一个回调函数表示获取定位信息成功，第二个回调函数表示获取地理位置失败，第三个参数是一个可选的对象{timeout:10000,enableHighAccuracy:false,maximumAge:0}，timeout设置请求超时时间，enableHighAccuracy浏览器获取高精度的位置，maximumAge在重复获取地理位置是允许多久重新获取一次，一般情况下都是不用考虑的。

注意：使用 watchPosition，浏览器多次调用请求成功的回调函数以便传递最新的位置。该函数返回一个watchID值，使用navigator.geolocation.clearWatch(watchId值)可以清除此次回调，使用不带参数的navigator.geolocation.clearWatch()清除所有watchPosition回调

	<script>if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {// 获取定位成功后执行的回调函数：参数position为定位信息对象，其属性coords为坐标，coords有两个属性用来获取经纬度：var latitude = position.coords.latitude; //维度var longitude = position.coords.longitude; //经度var accuracy = position.coords.accuracy; //精确度var altitude = position.coords.altitude; //高度var altitudeAccuracy = position.coords.altitudeAccuracy; //高度的精确度var heading = position.coords.heading; //相对于正北方运动的方向var speed = position.coords.speed; //运动的速度// 可以在下面调用定位运营商API，即下一节内容：}, function(err) {// 获取定位失败后执行的回调函数：switch (err.code) {case err.PERMISSION_DENIED:alert("获取定位请求被拒绝");break;case err.POSITION_UNAVAILABLE:alert("无法获取当前位置");break;case err.TIMEOUT:alert("请求地理位置超时");break;case err.UNKNOWN_ERROR:alert("未知错误");break;};});}</script>

在百度地图上显示定位：

通过上面的方法只能获取到当前位置的定位，若要想在某地图上面显示，还需要对某地图进行配置，这里介绍百度地图，如：

	<script src="http://api.map.baidu.com/api?v=2.0&ak=	0A5bc3c4fb543c8f9bc54b77bc155724"></script><!-- 引入百度地图javascript API --><script>var map = new BMap.Map("container"); // 创建百度地图对象，里面的参数表示把此地图创建到哪个容器var point = new BMap.Point(116.225350, 40.16999); // 创建百度地图上面的目标对象，并把经度纬度传给此对象map.centerAndZoom(point, 10); //默认的比例，地图的比例map.enableScrollWheelZoom(); //添加鼠标滚动缩放// 以上代码可以实现地图定位效果，但是为了更清晰和实用可以添加一个图标在目标位置、点击获取点击处经纬度var Icon = new BMap.Icon("1.png", new BMap.Size(128, 128)); // 定义一个图标var markers = new BMap.Marker(point, { // 将图标定位到目标位置icon: Icon});map.addOverlay(markers);//点击地图打印坐标：map.addEventListener("click", function(e) {// console.log(e);//这里的参数e是一个对象，里面包含很多相关属性和方法console.log("经度坐标：" + e.point.lng + " 纬度坐标：" + e.point.lat);});</script>

文件读取：

通过input输入框type属性为file的input输入框可以拿到文件，此时需要通过变量接收这个文件，之后通过onchange事件触发事件处理函数，事件处理函数中国可以new FileReader()实例化一个文件对象，其方法readAsDataURL()为加载文件，括号里面传入的是文件，如下案例：

	<script>var img = document.querySelector('img');var inputs = document.querySelector('input');// 当选择框有文件被选中时触发事件函数：inputs.onchange = function() {var files = new FileReader(); //创建一个文件对象// 给这个对象传入一个文件：files.readAsDataURL(this.files[0]); //这里this指files这个对象，files属性是所有拿到的文件，通过下标可以拿到具体的文件// 当文件加载完成时执行的函数：files.onload = function() {img.src = this.result; //this.result是一个读取完成后的base64位的数据};};</script>

网络状态：

window.navigator.onLine可以返回一个布尔值表示当前网络的状态；window有两个关于网络的事件：online表示在线，offline表示离线，这两个事件监听的是网线连接或断开的状态。

	<script>console.log(window.navigator.onLine);//true,以布尔值的方式表示网络状态，true表示联网，false表示断网window.online = function() {console.log('在线')};window.offline = function() {console.log('离线')};</script>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/575368.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Delphi 变体类型（Variant）的介绍（流与变体类型的相互转换、变体类型常用的函数）...

Delphi 变体类型（Variant）的介绍（流与变体类型的相互转换、变体类型常用的函数）...

来源&#xff1a;http://blog.csdn.net/xiongmao000738/article/details/6863988 一、变体类型常用的函数介绍&#xff1a; Variant&#xff1a; 一种可以拥有各种数据类型&#xff1b; 也可以告诉目前存储的数据是什么类型(通过使用VarType函数)&#xff1b; 可以给相同的Var…
阅读更多...
HTML 引用Css样式的四种方式

HTML 引用Css样式的四种方式

不才&#xff0c;只知道HTML引用CSS样式有四种方式&#xff0c;内部引用和外部引用各两种&#xff0c;因为老是忘记细节&#xff0c;记下了随时翻阅亦可方便如我般的初学者 内部引用方式1&#xff1a; 直接在标签内用 style 引用&#xff0c;如&#xff1a; <div class"…
阅读更多...
javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

javascript中实例对象和构造函数关系、原型语法、原型链、call实现继承、apply调用函数、bind拷贝函数、拷贝继承、class类、super、严格模式、高阶函数、闭包、递归、es6简介

实例对象和构造函数的关系及原型&#xff1a; 实例对象是通过构造函数创建出来的&#xff0c;实例对象的构造器constructor就是指向构造函数的&#xff1b;每个实例对象中的同一方法的指向是各不相同的&#xff0c;但是其属性值相同的属性可以相同&#xff0c;这样会造成内存浪…
阅读更多...
phpstorm IDE编辑器使用手记

phpstorm IDE编辑器使用手记

a.选项卡限制问题 突破打开的文件选项卡个数限制&#xff1a;默认安装后的phpstorm打开的文件个数是有限制的&#xff0c;默认是10个。也就是最多同时打开10个文件进行编辑。 超过10个就会自动关闭前面最先打开的文件。所以我们要修改设置&#xff1a;File > Setting 打开设…
阅读更多...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)

移动端web现状&#xff1a; 移动端常见浏览器&#xff1a;UC浏览器&#xff0c;QQ浏览器&#xff0c;Opera浏览器&#xff0c;百度手机浏览器&#xff0c;360安全浏览器&#xff0c;谷歌浏览器&#xff0c;搜狗手机浏览器&#xff0c;猎豹浏览器及杂牌浏览器。移动端常见的浏览…
阅读更多...
Centos 6.5(64bit)上安装Vertica single node

Centos 6.5(64bit)上安装Vertica single node

在Win8上使用虚拟机Virtualbox安装Centos6.5,想在上面安装vertica. 以下记录了我在安装的过程中遇到的问题与一些解决方案。 1.安装Centos的时候遇到了一个恼人的问题&#xff0c;即安装成功后第一次启动时会需要你配置一些用户信息&#xff0c;时区信息和Kdump信息。 我当时选…
阅读更多...
less简介、less安装、编译、less语法之变量、嵌套、类混入、函数混入、运算、less文件导入

less简介、less安装、编译、less语法之变量、嵌套、类混入、函数混入、运算、less文件导入

less基础&#xff1a; CSS是一门非程序语言&#xff0c;没有变量、函数、作用域等&#xff0c;此时使用rem单位就会出现图片等大量计算尺寸的问题&#xff0c;但是less可以轻松实现运算&#xff0c;它是CSS预处理语言&#xff0c;引入了变量、混入、函数等&#xff0c;常见的C…
阅读更多...
Mysql数据库备份和按条件导出表数据

Mysql数据库备份和按条件导出表数据

Mysql数据库备份和按条件导出表数据一、备份数据库# mysqldump -u root -p dbcurr>/home/20090219.sqlmysqldum为备份命令&#xff0c;-u用户&#xff0c;-p密码&#xff0c;dbcurr数据库名&#xff0c;>备份符&#xff0c;/home/20090219.sql存储数据文件的路径。www.2…
阅读更多...
jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

jQuery概述、优点、使用步骤、入口函数、jQuery对象和DOM对象之间的转换、层级选择器、属性选择器、筛选选择器、节点选择器

jQuery简介&#xff1a; jQuery是一个高效、精简并且功能丰富的javascript库&#xff0c;它提供的API简单易学&#xff0c;且兼容众多浏览器&#xff0c;极大地简化了javascript代码开发&#xff0c;包含内容&#xff1a;HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函…
阅读更多...
睡觉应该按时

睡觉应该按时

最近又想奋起 &#xff0c;最天又是 12 点多睡的&#xff0c;结果呢&#xff0c;呵呵&#xff1f; 一个规律的认识&#xff0c;真是反反复复&#xff0c;希望养成一个好的习惯&#xff0c;而不是不能可持续发展的习惯转载于:https://www.cnblogs.com/51Tsinghua/p/3831444.html…
阅读更多...
golang的指针到string，string到指针的转换

golang的指针到string，string到指针的转换

由于某个需求&#xff0c;需要如题的转换&#xff0c;废话不多说&#xff0c;直接贴代码了&#xff0c;其实挺丑了&#xff0c;备用了 func (this *Server) socketParserHandler(client *genTcpServer.Client, fullData []byte) {fmt.Println("original data is", cl…
阅读更多...
jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery中事件及常用事件总结、jQuery中常见效果、隐式迭代、链式编程、样式操作、动画队列、不同元素绑定同一个事件

jQuery事件&#xff1a; jQuery中的事件和javascript中的事件基本相似&#xff0c;不同的是jQuery中的事件处理函数写在事件后面的括号中&#xff0c;如&#xff1a; <script>$(input).click(function() {alert(hello word);});</script>jQuery中常见事件&#xf…
阅读更多...
atitit.提升开发效率---mda 软件开发方式的革命

atitit.提升开发效率---mda 软件开发方式的革命

atitit.提升开发效率---mda 软件开发方式的革命 1. 软件开发方式的革命开发工具的抽象层次将再次提升 1 2. 应用框架和其实现相分离 2 3. 目前的问题模型和代码不同步 2 4. MDA的历史及其由来 2 5. MDA的三个主要目标是&#xff1a;轻便性、 互操作性和可重用性。 3 6. MDA跟代…
阅读更多...
BigQuery 分区表简介和使用

BigQuery 分区表简介和使用

大纲 什么是分区表 我们先看定义&#xff1a; 分区表是一种数据库表设计和管理技术&#xff0c;它将表中的数据划分为逻辑上的多个分区&#xff0c;每个分区包含一组特定的数据。每个分区都根据定义的分区键&#xff08;通常是一个列或字段&#xff09;的值进行分类&#xff…
阅读更多...
jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性、设置文本、遍历元素、元素创建添加删除、操作元素尺寸、操作元素位置、注册事件、事件处理、解绑事件、拷贝、多库共存、jQuery插件

jQuery操作属性&#xff1a; jQuery中提供三种方法操作属性&#xff0c;分别是&#xff1a;prop()、arrt()、data(),具体如下&#xff1a; prop()操作自带属性&#xff1a;用来操作元素本身自带的属性&#xff08;包括没有显示在DOM上的自带属性&#xff09;&#xff0c;如:a…
阅读更多...
C_文件读写流

C_文件读写流

strcmp() 所在头文件&#xff1a;string.h 功能&#xff1a;比较俩个字符串 一般形式&#xff1a;strcmp(字符串1&#xff0c;字符串2) 说明&#xff1a; 当S1<S2时&#xff0c;返回为负数return result,result<0 当S1S2时&#xff0c;返回值0 当S1>S2时&#xff0c;返…
阅读更多...
初次使用Apache、ip地址、防火墙、域名、DNS、hosts文件、端口、URL介绍、Apache配置文件、配置虚拟主机、请求响应、http协议、

初次使用Apache、ip地址、防火墙、域名、DNS、hosts文件、端口、URL介绍、Apache配置文件、配置虚拟主机、请求响应、http协议、

Apache提供web服务&#xff1a; 启动Apache&#xff0c;让其客户端可以使用你机器上安装的Apache提供的web服务&#xff0c;访问你机器上的网站。这种情况下你的计算机就是服务器&#xff0c;别人的机器就是客户端。 注意&#xff1a;确保配置文件语法检查通过&#xff0c;确…
阅读更多...
量子计算机算法与应用研究论文（转载务必注明出处）

量子计算机算法与应用研究论文（转载务必注明出处）

量子计算机算法与应用研究 学科分类&#xff1a;计算机科学 湖北省沙市中学 谢晓啸 摘要 1.量子计算机 2.量子计算机算法 3.移动互联 4.云计算 5.经典计算机的局限 6.量子计算前景 二零一四年一月十二日 目 录 摘 要......................................................…
阅读更多...
cookie和session、web服务工作原理、Apache配置php扩展、php简介

cookie和session、web服务工作原理、Apache配置php扩展、php简介

cookie和session: cookie和session区别&#xff1a;cookie数据是存在本地的&#xff0c;而session数据是存在服务端的&#xff0c;session比cookie更安全。 cookie&#xff1a;用于http做会话时记住客户端所做的事,这里可以解决首次登陆页面广告等问题。 服务端与客户端在做开…
阅读更多...
分享MYSQL中的各种高可用技术（源自姜承尧大牛）

分享MYSQL中的各种高可用技术（源自姜承尧大牛）

图片和资料来源于MYSQL大牛姜承尧老师&#xff08;MYSQL技术内幕作者&#xff09; 姜承尧&#xff1a; 网易杭州研究院 技术经理 主导INNOSQL的开发 mysql高可用各个技术的比较 数据库的可靠指的是数据可靠 数据库可用指的是数据库服务可用 可靠的是数据&#xff1a;例如工商银…
阅读更多...
最新文章

Copyright @ 2022~2023