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次)-- ...
随机推荐
- Spring MVC 项目搭建 -5- spring security 使用数据库进行验证
Spring MVC 项目搭建 -5- spring security 使用数据库进行验证 1.创建数据表格(这里使用的是mysql) CREATE TABLE security_role ( id ...
- 伙计，给我来一杯package.json！不加糖
前言:夜深了,我熬了一锅热气腾腾的package.json,给大家端上来,希望大家喜欢 json和JS对象的区别 package.json,顾名思义,它是一个json文件,而不能写入JS对象. 所以我 ...
- MyBatis源码解析【1】准备工作
终于迎来了这一天,我觉得现在的我在经历了长时间的学习和开发之后有了一定的经验,所以准备开始学习源码. 今天我将做好充足的准备,在接下来的一个月中,努力的爬过这座大山.(可能不用一个月,但是我觉得需要仔 ...
- 闭包JS
一句话概括的话:闭包就是一个函数,捕获作用域内的外部绑定. 官方的定义:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因为这些变量也称为该表达式的一部分. 自由变量和闭包的关系:自 ...
- 【原】无脑操作：Windows 10 + MySQL 5.5 安装使用及免安装使用
本文介绍Windows 10环境下, MySQL 5.5的安装使用及免安装使用 资源下载: MySQL安装文件:http://download.csdn.net/detail/lf19820717/9 ...
- P1280 尼克的任务
题目描述 尼克每天上班之前都连接上英特网,接收他的上司发来的邮件,这些邮件包含了尼克主管的部门当天要完成的全部任务,每个任务由一个开始时刻与一个持续时间构成. 尼克的一个工作日为N分钟,从第一分钟开始 ...
- Python collections模块总结
Python collections模块总结 除了我们使用的那些基础的数据结构,还有包括其它的一些模块提供的数据结构,有时甚至比基础的数据结构还要好用. collections ChainMap 这是 ...
- 怎么在linux ubuntu 上的nginx 绑定域名
前一篇介绍了,如果在ubuntu上运行nodejs,毕竟访问的时候都是用ip地址+端口号,但是上production 环境都需要域名的,IP地址当然不行 读过上一篇的朋友知道了,如果在upstart ...
- Python项目实战：福布斯系列之数据采集
1 数据采集概述 开始一个数据分析项目,首先需要做的就是get到原始数据,获得原始数据的方法有多种途径.比如: 获取数据集(dataset)文件 使用爬虫采集数据 直接获得excel.csv及其他数据 ...
- java模拟一个抽奖程序
今天用一个程序模拟一个从1-32之间,随机抽取7组号码的抽奖程序 * 需要使用Java的图形界面知识 * 窗口 JFrame * 面板 JPanel * 显示文本信息的标签 JLabel * 文 ...