首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Html5 学习系列(六)Html5本地存储和本地数据库

为了破解Cookie的一系列限制,Html5通过JS的新的API就能直接存储大量的数据到客户端浏览器,而且支持复杂的本地数据库,让JS简直就是逆天了。...Html5支持两种的WebStorage,一种是永久性的本地存储(localStorage),另外一种是会话级别的本地存储(sessionStorage)。...//localStorage.clear(); alert(localStorage.length); 四、逆天了本地数据库 虽然Html5已经提供了功能强大的...逆天的是Html5提供了一个浏览器端的数据库支持,允许我们直接通JS的API在浏览器端创建一个本地数据库,而且支持标准的SQL的CRUD操作,让离线的Web应用更加方便的存储结构化的数据。...db) {alert("您的浏览器不支持HTML5本地数据库");return;} db.transaction(function (trans) {//启动一个事务,并设置回调函数

2.3K70

本地搜索优化:地理位置

四种确定本地位置机制 一、使用特定国家/地区谷歌搜索 谷歌特定国家/地区搜索会建议你使用所在的国家和地区版本,例如法国版,英国版。...二、通过用户设置的搜索位置偏好 搜索引擎给我们提供有搜索结果设置编好功能,我们可以使用谷歌高级搜索功能设置位置偏好展示所在位置的搜索结果。...三、通过IP地址确认你的位置 谷歌有一个IP地址数据库可以粗略估计城市级位置,谷歌通过最近服务器检测的方式确定你的地理位置。...四、使用W3C Geolocation API确认你的位置 W3C Geolocation API允许你的浏览器使用各种线索来计算准确的位置,例如我们常用的WIFI网络或GPS,计算出来的位置与你的站点共享...搜索引擎通过上述四种机制当前位置定位,给用户提供精准的本地搜索内容,所以我们要做本地化优化,满足搜索用户的需求。

1.5K30
您找到你想要的搜索结果了吗?
是的
没有找到

HTML5(二)——获取用户位置Geolocation

地图类、打车、外卖等类型的手机APP,一进入便咨询是否允许获取我们的位置,允许之后会根据我们所在位置推荐好物,逐渐地 H5 网页也开始获取用户位置。...手机地理位置:基于手机的地理定位数据是通过用户到一些基站的三角距离确定。这种方法可提供相当准确的位置结果。这种方法通常和基于WIFI基于GPS地位结合使用。 用户自定义:用户可以手动输入的地理位置。...,除非用户同意,否则无法获取到用户位置。...启动本地服务,再次获取位置之后,发现依旧报错,无法返回位置,报错信息为: { code: 1, message: "Only secure origins are allowed (see: https...除此之外,带有位置的我们经常会用到输入位置,在地图中自动标记一个点,移动标记点到更具体的位置,如图: 一般需要绘制地图的时候,我们就借助三方的百度、高德、腾讯等地图,注册账号,申请密钥才可以使用。

1.9K30

HTML5(二)——获取用户位置Geolocation

地图类、打车、外卖等类型的手机APP,一进入便咨询是否允许获取我们的位置,允许之后会根据我们所在位置推荐好物,逐渐地 H5 网页也开始获取用户位置。...手机地理位置:基于手机的地理定位数据是通过用户到一些基站的三角距离确定。这种方法可提供相当准确的位置结果。这种方法通常和基于WIFI基于GPS地位结合使用。 用户自定义:用户可以手动输入的地理位置。...,除非用户同意,否则无法获取到用户位置。...启动本地服务,再次获取位置之后,发现依旧报错,无法返回位置,报错信息为: { code: 1, message: "Only secure origins are allowed (see: https...除此之外,带有位置的我们经常会用到输入位置,在地图中自动标记一个点,移动标记点到更具体的位置,如图: 一般需要绘制地图的时候,我们就借助三方的百度、高德、腾讯等地图,注册账号,申请密钥才可以使用。

1.3K10

利用本地存储,记录滚动条的位置

2、功能分析 这个功能的实现并不是很难,当页面滚动时记录页面滚动条的位置并保存到本地存储里面,当你再次打开页面的时候读取本地存储里面的值来设置页面滚动条的位置。具体我们来分析一下。...分析: 1、监听页面滚动条的状态(是否滚动) 2、滚动时获取页面滚动条的位置 3、滚动条的位置保存到本地存储里面 4、页面每次加载的时候获取本地存储里面的值 5、获取到的值来设置页面滚动条的位置 3、知识要点...使用本地存储的setItem方法设置本地存储的值。...DOCTYPE html> HTML5Course - 利用本地存储,记录页面浏览器的位置</...5、总结 利用本地存储,记录滚动条的位置,主要涉及了两个主要技术点,一个点是滚动条的操作,另外一个点是本地存储的操作。

2.6K70

HTML5本地化应用开发-HTML5 Web存储详解

现在我们不用考虑这些了,我们将要学习一种基于HTML5的新技术Web存储。来解决这个问题。...背景 虽然Web存储已经有了自己的规范((http://dev.w3.org/html5/webstorage/) ),并且也在独立于Html5进行开发。...但Web存储通常是集中在HTML5技术之下的。 不像cookie一样,数据存储在Web Storage意味着客户端不在请求服务器了。...当然如果你对数据库感兴趣的话,你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/),这个api提供了可以存储大量存储内容数据的能力。...使用Web Storage Web Storage主要包括本地存储和基于Session的存储。它是在域名之上的。如果你不删除这些存储,它是会一直存在的。

75140

HTML5 不得不看的本地存储 LocalStorage

用过HTML5 本地存储和sessionStorage的,你就感觉html5很强大,比cookie和session好用很多,下面让我们来学习这个知识吧......首先自然是检测浏览器是否支持本地存储。...在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了...本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。...HTML5本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用方法如下: if(window.addEventListener){ window.addEventListener

1.2K30

HTML5 Web 存储 优于 Cookie 的本地存储方式

Web 开发中经常会遇到网站需要做一些例如用户备忘录、文章修改自动保存等需求 这些功能不需要长期保存,也不需要入数据库,所以有人可能会考虑使用 Cookie 去进行存储,但是 Cookie 中每条的存储空间为...它也可以存储大量的数据,而不影响网站的性能 HTML5 Web 存储目前有两种存储对象:localStorage 和 sessionStorage 客户端存储数据的两个对象为: localStorage...中的键值对会被清空 也就是说 localStorage 对象存储的数据没有时间限制,第二天、第二周或下一年之后,数据依然可用,sessionStorage 对象当用户关闭浏览器窗口后,数据会被删除 HTML5...Web 存储的局限性 浏览器的存储大小不统一,并且在 IE8 以上的浏览器版本才支持 HTML5 Web 存储 HTML5 Web 存储本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡...HTML5 Web 存储的使用 不管是 localStorage,还是 sessionStorage,可使用的 API 方法都相同,常用的有如下几个(以 localStorage 为例): 保存数据:

87710

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

position.timestamp)   请求失败函数     失败编号 :code       0 : 不包括其他错误编号中的错误       1 : 用户拒绝浏览器获取位置信息...: 更精确的查找,默认false       timeout : 获取位置允许最长时间,默认infinity       maximumAge : 位置可以缓存的最大时间,默认0     ...多次定位请求 : watchPosition(像setInterval)       移动设备有用,位置改变才会触发       配置参数:frequency 更新的频率     关闭更新请求...: clearWatch(像clearInterval) 本地存储:     Cookie       数据存储到计算机中,通过浏览器控制添加与删除数据     Cookie的特点   ...头信息)   页面间的cookie是共享   Storage     sessionStorage       session临时回话,从页面打开到页面关闭的时间段窗口的临时存储,页面关闭,本地存储消失

1.7K90

HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)

HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据可被同源的每个窗口或者标签页共享...是保存不敏感用户数据的最佳方案,也可以用于创建本地应用,NOSql。 Web SQL Database:实际上未包含在HTML5规范中。...HTML5中的Web Storage,称为Web本地存储,在Web客户端储存数据的功能,用键值对的形式保存数据,曾经属于HTML5的规范,目前已经被独立出来形成单独的规范体系。...2.6、存储位置与SQLite localStorage与cookie不一样,它存储在一个数据库文件中,默认位置在:C:\Users\Administrator\AppData\Local\Google...我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库 三个核心方法 openDatabase:这个方法使用现有数据库或创建新数据库创建数据库对象。

7.3K100
领券