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次)-- ...
随机推荐
- hadoop伪分布式环境搭建
环境:Centos6.9+jdk+hadoop1.下载hadoop的tar包,这里以hadoop2.6.5版本为例,下载地址https://archive.apache.org/dist/hadoop ...
- MaintainableCSS 《可维护性 CSS》 --- ID 篇
ID 从语法上讲,当只有一个实例时,我们应该使用一个ID.当有多个时,我们应该使用一个 class. 但是,ID 作用的优先级高于 class ,在我们想覆盖一个样式的时候,这就会导致问题. 为了演示 ...
- 【操作教程】利用YCSB测试巨杉数据库性能
一.前言 巨杉数据库(SequoiaDB)是国内第一款新一代文档型分布式数据库,巨杉数据库由巨杉软件完全自主研发,拥有完全自主知识产权,不基于任何其它的开源项目.SequoiaDB数据库是为分布式存储 ...
- 妙用Outlook2003群发商业邮件
妙用Outlook2003群发商业邮件 我们知道,如果需要在Outlook 2003中向多个对象发送邮件,那么只需要在指定收件人时用分号输入多个邮件地址或者使用抄送方式即可:假如对象较多,可以使用 ...
- 基于JAX-WS的WebService实现
JAX-WS是一套Java用于开发XML Web Services的技术规范,它的实现一般有CXF.AXIS和JDK(version>=1.6),借助这些我们可以进行SOAP服务开发. CXF和 ...
- Tomcat集群搭建
关于如何搭建Tomcat集群网上还是能搜到很多相关的教程,这里结合我自己在实际应用中的操作做下备忘. 案例说明: 这里以在本机部署的2个tomcat来做集群.当然,tomcat集群可以是分布式的,而差 ...
- centos+apache 2.x 开启gzip压缩
最近做了一个网站(PHP+Apache+MySQL),挂在百度云平台上面,基本配置是2G内存+5Mb带宽,每次打开主页都需要2-3s左右的时间,对于一个垂直搜索引擎来说,用户体验肯定会很差. 于是开始 ...
- C# Using的用法
C#里面Using有两种用法: 1.作为指令. using+命名空间,导入其他命名空间中定义的类型,这样可以在程序中直接用命名空间中的类型,不必指定命名空间: 命名空间是.NET程序在逻辑上的组织结构 ...
- jmeter断言：断言条件之间是“或”的关系
有时,我们在做断言时,需要同时满足一系列条件,这在jmeter自带响应断言中已经实现: 有时,同一请求在不同时间,返回的响应是不同的,而这都是正确的响应,也就是说,我们判断的条件之间是或的关系,此时, ...
- Objectiv-c - UICollectionViewLayout自定义布局-瀑布流
最近刚写的一个简单的瀑布流. 整体思路可能不是很完善. 不过也算是实现效果了. 高手勿喷 思路: 自定义UICollectionViewLayout实际上就是需要返回每个item的fram就可以了. ...