首先讲存储方式前要先知道为什么要使用他:一是利用本地数据,介绍网络请求;二是弱网环境下,高延迟,低带宽,要把数据本地化;

1、本地存储localStorage和sessionStorage

介绍:

  存储大小:5m,cookie只有4k,浏览器兼容性非常好,ie8以上都支持,ios无痕浏览失效;

  这个是浏览器兼容查询网站:http://caniuse.com/

  localStorage(不设置时间戳,不会过期)

  sessionStorage(关闭浏览器消失)

常用方法:

  localStorage.setItem(‘key’,’val’)   存数据

  localStorage.getItem(‘key’)  取数据

  localStorage.removeItem(‘key’)  移除数据

  localStorage.key(0)  索引

  localStorage.clear()  清空所有数据

使用注意事项:

  1.先判断浏览器是否支持

  2.写数据,需要异常处理,避免超出5m容量导致的报错

  3.避免把敏感信息存入localStorage

  4.key是有唯一性的

  5.会跨域

  6.子域名之间不能共享数据

特殊-图片储存: 
  1.创建 canvas 
  2.drawImage 这张图片 
  3.toDataURL 把图片转换为dataurl 
  4.储存在localStorage中

2、本地数据库indexedDB

介绍:

  适用于存储大量结构化数据

  浏览器兼容性比较差,ie10以上都支持,安全性较高

基本操作:

        //创建数据库
function openDB (name) {
var request=window.indexedDB.open(name);
request.onerror=function(e){
console.log('OPen Error!');
};
request.onsuccess=function(e){
myDB.db=e.target.result;
};
} var myDB={
name:'test',
version:1,
db:null
};
openDB(myDB.name); //关闭数据库
function closeDB(db){
db.close();
} //删除数据库
function deleteDB(name){
indexedDB.deleteDatabase(name);
}

3、离线存储application cache

介绍:

  浏览器兼容性一般,ie10以上都支持

  适用于更改少的单页面,可用户无网络情况下显示页面

  更新机制不是很好,一般要刷新一次才能更新

使用步骤:

  1.头部加manifest清单

<html  manifest="demo.appcache">

  2.清单内容如下:

CACHE MANIFEST

CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js NETWORK:
# 不需要缓存的
4.jpg FALLBACK:
# 访问缓存失败后,备用访问的资源,第一个是访问源,第二个是替换文件*.html /offline.html
2.jpg/3.jpg

  3.manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest"。必须在 web 服务器上进行配置,不同的服务器不一样

HTML5的三种存储方式以及区别的更多相关文章

  1. js 三种存储方式的区别

    javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookie 相同点:都保存在浏览器端,同源的 不同点: ①传递方式不同 cookie数据始终 ...

  2. 三种存储方式DAS、NAS、SAN

    ------------恢复内容开始------------ 一.DAS.NAS.SAN在存储领域的位置 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文主要介绍目前主流的 ...

  3. 常见三种存储方式DAS、NAS、SAN的架构及比较

    转至:https://blog.csdn.net/shipeng1022/article/details/72862367 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文 ...

  4. js三种存储方式区别

    javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 相同点:都保存在浏览器端,同源的 不同点: ①传递方式不同 cookie数据始 ...

  5. 第十篇----------javascript函数的三种定义方式及区别

    javascript定义函数有3种方式: //3种函数定义方式,前两种常用 /** * 1,function 语句式 * 形式:句子 * 名称:有名 * 性质:静态 * 解析时机:优先解析 * 作用域 ...

  6. c++中三种继承方式的区别

    public公有继承 protected保护继承 private私有继承 我们知道类的private和protected成员,在类外是不可以使用的.只有public成员可以在类外直接使用. 公有继承时 ...

  7. EF三种编程方式的区别Database first ,Model first ,code first

    首先对于EF中先出现的datebase  first和model first两种编程方式,其的区别根据字面意思很容易能够理解. datebase  first就是代表数据库优先,那么前提就是先创建数据 ...

  8. DAS、SAN和NAS三种存储方式

    DAS存储 DAS存储在我们生活中是非常常见的,尤其是在中小企业应用中,DAS是最主要的应用模式,存储系统被直连到应用的服务器中,在中小企业中,许多的数据应用是必须安装在直连的DAS存储器上. DAS ...

  9. Oracle三种链接方式的区别

    1 nested loops join--我们用设置statistics_level=all的方式来观察如下表连接语句的执行计划: --T2表被访问100次(驱动表访问1次,被驱动表访问100次)-- ...

随机推荐

  1. 11.page,pagcontext,config对象

  2. 基于AFN封装的带缓存的网络请求

    给大家分享一个基于AFN封装的网络请求 git: https://github.com/zhouxihi/NVNetworking #带缓存机制的网络请求 各类请求有分带缓存 , 不带缓存, 可自定义 ...

  3. OpenShitf 使用教程

    OpenShitf https://www.openshift.com 1.注册openshitf账号 https://www.openshift.com/app/account/new 2.gett ...

  4. winform .net2.0的程序如何运行于.net 4.x

    约束 最近有一个winform项目,要求: (1)程序能够运行在winxp, win7, win8, win10中 (2)安装尽可能简单,尽量不要安装.net framework.即使要安装也要尽可以 ...

  5. js加强版图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. javascript之原型(prototype)

    今天是第一次写博客,写点在javascript中重要的一个概念----原型(prototype): 原型,顾名思义,就是一切事物的模板. 柏拉图在<理想国>卷10中说:"床不是有 ...

  7. vsftpd配置虚拟用户

    #安装vsftpd yum -y install vsftpd #创建本地ftp账户 groupadd ftpuser useradd -g ftpuser -s /sbin/nologin ftpu ...

  8. 免费MD5解密网站,轻松破解md5密码,mysql5/mysql323,ntlm,salt密码

    md5解密网站:http://cmd5.la 网站语言:php 免费指数:★★★        (8位内小写数字字母免费,11位内数字免费) 解密范围:★★★★☆ (覆盖了1-12位很多常用密码和特殊 ...

  9. Java基础语法<八> 继承

    1.超类和子类 超类和子类 父类与子类 多态: 一个对象变量可以指示多种实际类型的现象称为多态 一个变量可以引用父类对象,也可以引用其子类对象,这就是多态. 不能将一个超类的引用赋给子类变量,因为调用 ...

  10. javascript事件轮询

    JavaScript 运行机制详解:再谈Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么Ja ...