JavaScript技巧总结和本地存储(二)
- 离线检测
检测是否离线,html5为此定义了一个navigator.onLine属性,这个属性为true表示设备能上网,false表示离线,这个属性还有点兼容问题。因此单独使用这个属性不能确定网络是否连通,即便如此,在请求发生错误的情况,检测这个属性仍然是管用的。
Html5还定义了两个事件:online和offline,当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。
- 应用缓存
Hmtl5的应用缓存是专门为开发离线web应用而设计的,Appcache就是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源:
CACHE MANIFEST
#Comment file.js file.css
要将描述文件与页面关联起来,可以在<html>中的manifest属性中指定这个文件路径。
虽然应用缓存的意图是确保离线时资源可用,但也有相应的JavaScript API 让你知道它在做什么。这个API的核心是applicationCache对象,这个对象有一个status属性,属性的值是常量,表示应用缓存的如下当前状态。
- 0:无缓存
- 1:闲置
- 2:检查中
- 3:下载中
- 4:更新完成
- 5:废弃
应用缓存还有很多相关的事件,表示其状态的改变
- checking:在浏览器为应用缓存查找更新时触发
- error:在检查更新或下载资源期间发生错误时触发
- noupdate:在检查描述文体发现文件无变化时触发
- downloading:在开始下载应用缓存资源时触发
- progress:在文件下载应用缓存的过程中持续不断地触发
- updateready:在页面新的应用缓存下载完毕可以通过swapcache使用时触发
- cached:在应用缓存完整可用时触发
- 数据存储
- HTTP Cookie是在客户端用于存储会话信息的,该标准要求服务器对任意http请求发送Set-Cookie HTTP头作为响应的一部分,其中包括会话信息。
- 限制:cookie在性质上是绑定的域名下的,当设定了一个cookie后,再给创建它的域名发生请求时,都会包含中国cookie,这个限制确保了存储在cookie中的信息只能让批准的接受者访问,而无法被其他域访问。
- Cookie的构造
Cookie由浏览器保存的以下几块信息构成:
名称:一个唯一确定cookie的名称。
值:存储在cookie中的字符串,
域:cookie对于哪个域是有效的
路径:对于指定域中的那个路径,应该向服务器发送cookie
失效时间:表示cookie何时应该被删除。
安全标志:指定后,cookie只有在使用SSL连接的时候才发生到服务器。
- JavaScript中的cookie
Cookie所有名字和值都是经过URL编码的,所以必须使用decodeURIComponent来解码。
由于JavaScript中读写cookie不是非常直观,常常需要写一些函数来简化cookie的功能,基本的cookie操作有三种:读取、写入和删除:
var CookieUtil={ get:function(name){ var cookieName=encodeURIComponent(name)+”=”, cookieStart=document.cookie.indexOf(cookieName), cookieValue=null; if(cookieStart>-1){ var cookieEnd=document.cookie.indexOf(“;”,cookieStart); if(cookieEnd==-1){ cookieEnd=document.cookie.length; } cookieValue=decodeURIComponent(doucument.cookie.substring(cookieStart+cookieName.length,cookieEnd)); } Retrun cookieValue; }, set:function(name,value,expires,path,domain,secure){ var cookieText=encodeURIComponent(name)+”=”+encodeURIComponent(value); if(expires instanceof Date){ cookieText+=”; expires=”+expires.toGMTString(); } if(path){ cookieText+=”; path=”+path; } if(domain){ cookieText+=”; domain=”+domain; } if(secure){ cookieText+=”; secure”; } Document.cookie=cookieText; }, unset:function(name,path,domain,secure){ this.set(name,””,new Date(0),path,domain,secure); } }
- 子cookie
为了绕开浏览器的单域名下的cookie数限制,一些开发人员使用了一种称为子cookie的概念。子cookie是存放在单个cookie中的更小段的数据。也就是使用cookie值来存储多个名称值对儿。
- Web存储机制
也就是html5新加的sessionStorage 和localStorage
JavaScript技巧总结和本地存储(二)的更多相关文章
- JavaScript技巧总结和本地存储(一)
类型检测 typeof 一般用于js的基本数据类型(undefined,number,string,boolean.注意null检测的结构是object)检测,引用类型检测不准确. instanceo ...
- JavaScript:浏览器的本地存储
cookie.localStorage.sessionStorage的使用 <!DOCTYPE html> <html lang="en"> <hea ...
- H5本地存储二
众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE ...
- HTML5 学习总结(三)——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5 学习笔记(三)——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
- HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- HTML5 ——本地存储
目录 一.HTML4客户端存储 1.1.提交表单发送到服务器的信息 1.2.客户端本地存储概要 二.localStorage 2.1.添加 2.2.取值 2.3.修改 2.4.删除 2.5.跨页面与跨 ...
- HTML5 学习总结(三)——本地存储(localStorage、sessionStorage、WebSqlDataBase、IndexedDB)
HTML5问世以后,前端加入了一个重要的功能,便是本地存储,本地存储可分为4类: Local Storage:总的存储量有所限制,并不能提供真正的检索API,数据的生命期比窗口或浏览器的生命期长,数据 ...
- web前端实现本地存储
当我们在提及web前端本地存储的时候,首先需要介绍一下本地化存储的概念和历史.本地化存储从来不是一个新奇的概念,因为web应用程序一直在追求的就是媲美甚至超越桌面应用程序.但是桌面应用程序一直优于we ...
随机推荐
- git 代码服务器的网页版gitweb的搭建
sudo apt-get install apache2 git-core gitwebsudo a2enmod rewrite #vi /etc/gitweb.conf $projectroot = ...
- kali2016.2(debian)快速安装mysql5.7.17
糊里糊涂的删除了kali原本的mysql5.6.27版本,原本的mysql与很多软件关联在一起,每次安装都失败,后来把相关的都卸载了(悲催的浪费了一天) 下载地址 debian mysql下载地址 ...
- [20180928]如何能在11g下执行.txt
[20180928]如何能在11g下执行.txt --//链接问的问题: http://www.itpub.net/thread-2105467-1-1.html create table test( ...
- H5——简易马祖
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 自动化测试基础篇--Selenium弹出框alert
摘自https://www.cnblogs.com/sanzangTst/p/7685304.html 不是所有的弹出框都叫alert,在使用alert方法前,先要识别出到底是不是alert.先认 ...
- 用好lua+unity,让性能飞起来——关于《Unity项目常见Lua解决方案性能比较》的一些补充
<Unity项目常见Lua解决方案性能比较>,这篇文章对比了现在主流几个lua+unity的方案 http://blog.uwa4d.com/archives/lua_perf.html ...
- TP中的图片水印
$img_dir = ROOT_PATH . 'public/upload/card/' . $data['jt_id']; //创建合成图片存放位置 //自动创建文件夹 if (!file_exis ...
- Cs231n课堂内容记录-Lecture 4-Part1 反向传播及神经网络
反向传播 课程内容记录:https://zhuanlan.zhihu.com/p/21407711?refer=intelligentunit 雅克比矩阵(Jacobian matrix) 参见ht ...
- Python3 Selenium多窗口切换
Python3 Selenium多窗口切换 以腾讯网(http://www.qq.com/)为例,打开腾讯网,点击新闻,打开腾讯新闻,点击新闻中第一个新闻链接. 在WebDriver中封装了获取当前窗 ...
- css点滴1—八种方式实现元素垂直居中
这里介绍实现元素垂直居中的方式,文章是参考了<css制作水平垂直居中对齐>这一篇文章. 1.行高和高度实现 这种方式实现单行垂直居中是很简单的,但是要保证元素内容是单行的,并且其高度是不变 ...