HTML5的三种存储方式以及区别

MrLQZ 2024-10-03 23:15:53 原文

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

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次)-- ...

随机推荐

iOS 手机时区获取问题
1. 标准的获取时区的正确方法 [NSTimeZone resetSystemTimeZone]; // 重置手机系统的时区 NSInteger offset = [NSTimeZone loca ...
CentOS 7.2mini版本下编译安装php7.0.10+MySQL5.7.14+Nginx1.10
一.安装前的准备工作 1.yum update #更新系统 2.yum install gcc gcc-c++ autoconf automake cmake bison m4 libxml2 ...
关于STM32单片机的IAP实现
基于STM32F103单片机的IAP实现(虽然该篇文章不会详细写出实现细节,但是会从一个全局的角度讲述,实际的实现细节只需根据datasheet即可完成). 一.基础概念什么是IAP?IAP即在应用 ...
Watson Explorer Analytical Components 1
Introduction: IBM Watson Explorer Analytical Components(AC) which is part of the IBM Watson Explorer ...
Akka（13）：分布式运算：Cluster-Sharding-运算的集群分片
通过上篇关于Cluster-Singleton的介绍,我们了解了Akka为分布式程序提供的编程支持:基于消息驱动的运算模式特别适合分布式程序编程,我们不需要特别的努力,只需要按照普通的Actor编程方 ...
有关各个版本的Visual Studio（VS）和SQL Server安装的顺序总结
前几天从网上买了块三星的SSD,把原来的HDD放在了光驱位,然后重新安装了系统.想起来收集储存的好多源代码还是VS2008开发的,然后打算把之前用过的VS2008也装上,安装过程出了点问题.发现安装完 ...
CJOJ 1308 【HNOI 2002 】营业额统计 / CodeVS 1296 营业额统计（STL，二分）
CJOJ 1308 [HNOI 2002 ]营业额统计 / CodeVS 1296 营业额统计(STL,二分) Description Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一 ...
使用vue+flask做全栈开发的全过程（实现前后端分离）
花了几天的时间终于在本地把前后端跑通了,以一篇博客记录我这几天的心酸... 1.安装nodejs(自带npm,可能会出现版本错误,更新npm) 2.npm在国内下载时,可能会慢,所以建议要安装淘宝镜像 ...
neo4j 数据库导入导出
工作中需要将 A 图数据库的数据完全导出,并插入到 B 图数据库中.查找资料,好多都是通过导入,导出 CSV 文件来实现.然而,经过仔细研究发现,导出的节点/关系都带有 id 属性 ,因为 A B ...
DDD理论学习系列（11）-- 工厂
DDD理论学习系列--案例及目录 1.引言在针对大型的复杂领域进行建模时,聚合.实体和值对象之间的依赖关系可能会变得十分复杂.在某个对象中为了确保其依赖对象的有效实例被创建,需要深入了解对象实例化逻 ...