html5 离线存储 地理信息与本地存储

时间:2021-01-20 09:12:18

搭建离线应用程序
  ①服务器设置头信息 :
    AddType text/cache-manifest .manifest
  ② html标签加 :
    manifest=“xxxxx.manifest”
  ③写manifest文件 : 离线的清单列表
    先写 : CACHE MANIFEST
  FALLBACK : 第一个网络地址没获取到,就走第二个缓存的
  NETWORK :无论缓存中存在与否,均从网络获取

web Workers
  Worker运行环境
    navgator : appName、appVersion、userAgent、platform
    location : 所有属性都是只读的
  self : 指向全局 worker 对象
    所有的ECMA对象,Object、Array、Date等
  XMLHttpRequest构造器
    setTimeout和setInterval方法
  close()方法,立刻停止worker运行
    importScripts方法

  内容编辑
    contenteditable = "true"
  语言输入
    <input type="text" x-webkit-speech/>

地理位置对象

navigator.geolocation
  单次定位请求 :getCurrentPosition(请求成功,请求失败,数据收集方式)
  请求成功函数
    经度 : coords.longitude
    纬度 : coords.latitude
    准确度 : coords.accuracy
    海拔 : coords.altitude
    海拔准确度 : coords.altitudeAcuracy
    行进方向 : coords.heading
    地面速度 : coords.speed
    时间戳 : new Date(position.timestamp)

  请求失败函数
    失败编号 :code
      0 : 不包括其他错误编号中的错误
      1 : 用户拒绝浏览器获取位置信息
      2 : 尝试获取用户信息,但失败了
      3 : 设置了timeout值,获取位置超时了
    数据收集 : json的形式
      enableHighAcuracy : 更精确的查找,默认false
      timeout : 获取位置允许最长时间,默认infinity
      maximumAge : 位置可以缓存的最大时间,默认0

    多次定位请求 : watchPosition(像setInterval)
      移动设备有用,位置改变才会触发
      配置参数:frequency 更新的频率

    关闭更新请求 : clearWatch(像clearInterval)

本地存储:
    Cookie
      数据存储到计算机中,通过浏览器控制添加与删除数据
    Cookie的特点
  存储限制
    域名100个cookie,每组值大小4KB
    客户端、服务器端,都会请求服务器(头信息)
  页面间的cookie是共享
  Storage
    sessionStorage
      session临时回话,从页面打开到页面关闭的时间段窗口的临时存储,页面关闭,本地存储消失
    localStorage
      永久存储(可以手动删除数据)
    Storage的特点
      存储量限制 ( 5M )
    客户端完成,不会请求服务器处理
      sessionStorage数据是不共享、 localStorage共享

  Storage API
    setItem():
      设置数据,key\value类型,类型都是字符串可以用获取属性的形式操作
    getItem():
      获取数据,通过key来获取到相应的value
    removeItem():
      删除数据,通过key来删除相应的value
    clear():
      删除全部存储的值

  存储事件:
    当数据有修改或删除的情况下,就会触发storage事件
    在对数据进行改变的窗口对象上是不会触发的
      Key : 修改或删除的key值,如果调用clear(),key为null
      newValue : 新设置的值,如果调用removeStorage(),key为null
      oldValue : 调用改变前的value值
      storageArea : 当前的storage对象
      url : 触发该脚本变化的文档的url
    注:session同窗口才可以,

html5 离线存储 地理信息与本地存储的更多相关文章

  1. 容器化RDS|计算存储分离 or 本地存储?

    随着交流机会的增多(集中在金融行业,规模都在各自领域数一数二),发现大家对 Docker + Kubernetes 的接受程度超乎想象, 并极有兴趣将这套架构应用到 RDS 领域.数据库服务的需求可以 ...

  2. HTML5基础扩展——地理位置、本地存储、缓存

    HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...

  3. html5 localStorage实现表单本地存储

    随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...

  4. HTML5学习总结-07 WebStorage 本地存储

    一 Storage sessionStorage session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失 localStorage 永久存储(可以手动删除数据)S ...

  5. &lpar;尚030&rpar;Vue&lowbar;案例&lowbar;存储数据&lpar;localStorage本地存储技术&rpar;

    当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...

  6. HTML5系列三(多媒体播放、本地存储、本地数据库、离线应用)

    各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...

  7. Html5本地存储&plus;本地数据库&plus;离线存储

    首先介绍什么叫存储: cache:通常把它叫做缓存,功能就是把从DB,或者磁盘拿出来的东西放在缓存里面,这样的话可以减少读取磁盘的IO. 磁盘文件:通常把一些图片或者一些视频都存放在磁盘上. 数据库: ...

  8. HTML5 学习总结(三)——本地存储

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  9. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

随机推荐

  1. 整理CSS引发的相关理论的梳理

    写在前面 因为原先项目中的CSS样式乱得不行,所以领导决定要花大时间整理一下样式,也为了后续维护起来方便.其实也苦了自己,想想也是一件多烦的事情,烦的原因并非是说这件事情做起来没有意义,而是觉得这样的 ...

  2. 常用数据结构及复杂度 array、LinkedList、List、Stack、Queue、Dictionary、SortedDictionary、HashSet、SortedSet

    原文地址:http://www.cnblogs.com/gaochundong/p/data_structures_and_asymptotic_analysis.html  常用数据结构的时间复杂度 ...

  3. 不合法语句 self&period;contentView&period;frame&period;origin&period;x &equals; x&semi;

    下面的写法是错误的: CGFloat x = self.contentView.frame.origin.x; x = _lastDownX + translation.x; self.content ...

  4. 【ASP&period;NET Core】依赖注入高级玩法——如何注入多个服务实现类

    依赖注入在 ASP.NET Core 中起中很重要的作用,也是一种高大上的编程思想,它的总体原则就是:俺要啥,你就给俺送啥过来.服务类型的实例转由容器自动管理,无需我们在代码中显式处理. 因此,有了依 ...

  5. netty解码器详解(小白也能看懂!)

    什么是编解码器? 首先,我们回顾一下netty的组件设计:Netty的主要组件有Channel.EventLoop.ChannelFuture.ChannelHandler.ChannelPipe等. ...

  6. django报错总结

    问题一: dictionary update sequence element #1 has length 3; 2 is required 解决方法: 检查视图函数的render里传的字典

  7. Docker:集装箱式&OpenCurlyDoubleQuote;运输”在软件上的实现

    Docker是由PaaS提供商dotCloud在2013年年初创建的一款开源应用引擎,Docker可以自动将任何应用打包成轻量.可移植.自包涵的容器引擎.开发者构建的应用可以一次构建全平台运行,包括本 ...

  8. SSH框架的基本整合

    SSH框架的基本整合 AOP注解方式 编写切面类(包括通知和切入点) 开启自己主动代理 JDBC模板技术 Spring提供模板技术,数据库的操作 以后编写DAO层,都能够继承JdbcDaoSuppor ...

  9. python 转化文件编码 utf8

    使用visual studio最大的一个问题就是文件编码问题,当文件中有中文时,visual studio 会默认为区域编码,也就是gb2312,如果想跨平台或者不用vs编译的话,就会因为编码问题导致 ...

  10. Rails的静态资源管理(六)—— Asset Pipeline缓存存储方式、预处理、升级等

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...