HTML5的三种存储方式以及区别
首先讲存储方式前要先知道为什么要使用他：一是利用本地数据，介绍网络请求；二是弱网环境下，高延迟，低带宽，要把数据本地化；
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的三种存储方式以及区别的更多相关文章
- js 三种存储方式的区别
javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookie 相同点:都保存在浏览器端,同源的 不同点: ①传递方式不同 cookie数据始终 ...
- 三种存储方式DAS、NAS、SAN
------------恢复内容开始------------ 一.DAS.NAS.SAN在存储领域的位置 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文主要介绍目前主流的 ...
- 常见三种存储方式DAS、NAS、SAN的架构及比较
转至:https://blog.csdn.net/shipeng1022/article/details/72862367 随着主机.磁盘.网络等技术的发展,数据存储的方式和架构也在一直不停改变,本文 ...
- js三种存储方式区别
javaScript有三种数据存储方式,分别是: sessionStorage localStorage cookier 相同点:都保存在浏览器端,同源的 不同点: ①传递方式不同 cookie数据始 ...
- 第十篇----------javascript函数的三种定义方式及区别
javascript定义函数有3种方式: //3种函数定义方式,前两种常用 /** * 1,function 语句式 * 形式:句子 * 名称:有名 * 性质:静态 * 解析时机:优先解析 * 作用域 ...
- c++中三种继承方式的区别
public公有继承 protected保护继承 private私有继承 我们知道类的private和protected成员,在类外是不可以使用的.只有public成员可以在类外直接使用. 公有继承时 ...
- EF三种编程方式的区别Database first ，Model first ，code first
首先对于EF中先出现的datebase first和model first两种编程方式,其的区别根据字面意思很容易能够理解. datebase first就是代表数据库优先,那么前提就是先创建数据 ...
- DAS、SAN和NAS三种存储方式
DAS存储 DAS存储在我们生活中是非常常见的,尤其是在中小企业应用中,DAS是最主要的应用模式,存储系统被直连到应用的服务器中,在中小企业中,许多的数据应用是必须安装在直连的DAS存储器上. DAS ...
- Oracle三种链接方式的区别
1 nested loops join--我们用设置statistics_level=all的方式来观察如下表连接语句的执行计划: --T2表被访问100次(驱动表访问1次,被驱动表访问100次)-- ...
随机推荐
- 11.page，pagcontext，config对象
- 基于AFN封装的带缓存的网络请求
给大家分享一个基于AFN封装的网络请求 git: https://github.com/zhouxihi/NVNetworking #带缓存机制的网络请求 各类请求有分带缓存 , 不带缓存, 可自定义 ...
- OpenShitf 使用教程
OpenShitf https://www.openshift.com 1.注册openshitf账号 https://www.openshift.com/app/account/new 2.gett ...
- winform .net2.0的程序如何运行于.net 4.x
约束 最近有一个winform项目,要求: (1)程序能够运行在winxp, win7, win8, win10中 (2)安装尽可能简单,尽量不要安装.net framework.即使要安装也要尽可以 ...
- js加强版图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- javascript之原型（prototype）
今天是第一次写博客,写点在javascript中重要的一个概念----原型(prototype): 原型,顾名思义,就是一切事物的模板. 柏拉图在<理想国>卷10中说:"床不是有 ...
- vsftpd配置虚拟用户
#安装vsftpd yum -y install vsftpd #创建本地ftp账户 groupadd ftpuser useradd -g ftpuser -s /sbin/nologin ftpu ...
- 免费MD5解密网站，轻松破解md5密码，mysql5/mysql323，ntlm,salt密码
md5解密网站:http://cmd5.la 网站语言:php 免费指数:★★★ (8位内小写数字字母免费,11位内数字免费) 解密范围:★★★★☆ (覆盖了1-12位很多常用密码和特殊 ...
- Java基础语法<八> 继承
1.超类和子类 超类和子类 父类与子类 多态: 一个对象变量可以指示多种实际类型的现象称为多态 一个变量可以引用父类对象,也可以引用其子类对象,这就是多态. 不能将一个超类的引用赋给子类变量,因为调用 ...
- javascript事件轮询
JavaScript 运行机制详解:再谈Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么Ja ...