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次)-- ...
随机推荐
- JS综合练习
练习一.任意数求和(最多输入十位数),输入999终止 运行代码 <!DOCTYPE html><html> <head> <meta charset=&quo ...
- java在的数据类型
java数据类型的划分 程序的本质=数据的处理: 数据库的本质=数据的存储. java之中数据类型一共分为两大类. ·基本数据类型: 数值型: 整型:byte,short,int,long 默认值都是 ...
- h5 新增特性用法---持续更新
1.dataset <div class="box" data-title1="自定义属性" data-age="18" data-m ...
- 将notepad++打造成java快速开发IDE
参考文章:http://blog.csdn.net/mdyyzc/article/details/7653096 有时候要试验一小段代码,打开eclipse又需要忍受漫长的煎熬(电脑配置较低,见谅). ...
- 对sppnet网络的理解
前言: 接着上一篇文章提到的RCNN网络物体检测,这个网络成功的引入了CNN卷积网络来进行特征提取,但是存在一个问题,就是对需要进行特征提取图片大小有严格的限制.当时面对这种问题,rg大神采用的是对分 ...
- 移动端布局最佳实践（viewport+rem）
通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 ...
- 华为OJ之最长公共子序列
题目描述: 对于两个给定的字符串,给出他们的最长公共子序列. 题目分析: 1,在之前的博文(http://www.cnblogs.com/yonguo123/p/6711360.html)中我们讨论了 ...
- Github 的系统内部都在用什么开源软件？
有时候处理规模问题最好的办法就是让事情变得简单并尽你可能去避免出现这种情况.这是 GitHub 所采用的方法,林纳斯·托瓦兹(Linus Torvalds)在十年前开发了Git源代码控制工具,GitH ...
- 自动创建win计划任务
@echo off set NAME=refrash IE set TIME=20:01:00 set DAY=MON,TUE,WED,THU,FRI,SAT,SUN set COMMAND=cscr ...
- Pandas: 如何将一列中的文本拆分为多行？ | Python
Pandas: 如何将一列中的文本拆分为多行? 在数据处理过程中,经常会遇到以下类型的数据: 在同一列中,本该分别填入多行中的数据,被填在一行里了,然而在分析的时候,需要拆分成为多行. 在上图中,列名 ...