HTML5 저장 방법 요약

이 기사는 주로 HTML5 저장 방법에 대한 요약을 공유하며 HTML5 개발자에게 도움이 되고 모든 사람이 HTML5 저장 방법을 더 잘 익히는 데 도움이 되기를 바랍니다.

1. 쿠키가 급격히 증가합니다

2. 로컬 저장소 localstorage

3. sessionstorage

4. 오프라인 캐시(애플리케이션 캐시)

5. Web SQL

6. IndexedDB

쿠키 성장의 잔인함

HTML5가 등장하기 전, 쿠키는 야만 시대의 야만적인 성장과 마찬가지로 클라이언트 스토리지 전체를 점령했습니다. 쿠키를 만나보세요 실용적인 응용 프로그램의 요구 사항을 빠르고 잘 충족시킵니다. 하지만 문제도 분명합니다. 쿠키는 요청 헤더에 데이터를 전달하며 크기는 4K로 제한됩니다. 이는 매우 안전하지 않으며 외부에서 가로채기 쉽습니다. >도메인 오염. HTML5出现之前，Cookies便占据了客户端存储的整个江山，就像是蛮荒时代的野蛮生长，cookies很好、快速地满足实际应用的需求。但是它的问题也很明显，cookies会在请求头上带着数据，而且大小限制在4K以内，这是非常不安全的，容易被外部截取，还存在domain污染。

IE浏览器特别喜欢搞自己的一套，对于增加存储容量加入了UserData，大小是64K，但是其他浏览器不喜欢跟它玩，也就只有它自己一家支持。

那么，重点来了。既然cookies问题那么多，就要想办法解决，不然没法继续往前发展。首先要确认它的问题有哪些，然后根据这些问题寻找解决方案。

• 解决4K存储容量问题

• 解决请求头带有存储信息的问题，也就是增加安全性，通过加密通道或方式进行数据存储和传输

• 解决关系型存储的问题

• 跨浏览器

本地存储localstorage

存储方式

以键值对（key-value）的方式存储，永久存储，永不失效，除非手动删除。

存储容量

每个域名5M。

常用的API

getItem //取记录

setItem //设置记录

removeItem //移除记录

key //取key所对应的值

clear //清除记录

本地存储sessionstorage

HTML5的本地存储API中的localstorage与sessionstorage在使用方法上是相同的，区别在于sessionstorage在关闭页面后即被清空，而localstorage则会一直保存，除非手动删除。

离线缓存（application cache）

本地缓存应用所需的文件

使用方法

1、配置manifest文件

页面上：

nbsp;HTML>

...

manifest文件：

manifest是最简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest文件分为三个部分：

1. CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存

2. NETWOrK-在此标题下的文件需要与服务器进行连接，且不会被缓存

3. FALLBACK-在此标题下的文件规定当页面无法被访问时的回退页面（比如404页面）

完整demo

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html

服务器上：manifest文件需要配置正确的MIME-type，即text/cache-manifest。

常用API

核心是applicationCache对象，有个status属性，表示应用缓存的当前状态：

0 （UNCACHED）：无缓存，没有和页面相关的应用缓存

1 （IDLE）：闲置，应用缓存没有得到更新

2 （CHECKING）：检查中，正在下载描述文件并检查更新

3 （DOWNLOADING）：下载中，应用缓存正在下载与描述文件中指定的资源

4 （UPDATEREADY）：更新完成，所有资源都已经下载完毕

5 （IDLE）：废弃，应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

相关事件

表示应用缓存状态的改变：

checking：在浏览器为应用缓存查找更新时触发

error：在检查更新或下载资源期间发生错误时触发

noupdate：在检查描述文件发现文件无变化时触发

downloading：在开始下载应用缓存资源时触发

progress：在文件下载应用缓存的过程中持续不断地下载时触发

updateready：在页面新的应用缓存下载完毕时触发

cached：在应用缓存完整可用时触发

application cacheIE 브라우저는 특히 저장 용량을 늘리기 위해 UserData를 추가하는데, 다른 브라우저에서는 크기가 64K입니다. 당신이 그것을 가지고 놀고 싶지 않다면 그것은 당신만을 지원할 것입니다.

🎜그럼 요점은 이렇습니다. 쿠키에는 많은 문제가 있으므로 이를 해결하기 위한 방법을 찾아야 합니다. 그렇지 않으면 앞으로 나아갈 수 없습니다. 먼저 문제를 파악한 다음 해당 문제를 기반으로 솔루션을 찾으십시오. 🎜

🎜🎜4K 저장 용량 문제 해결🎜🎜🎜🎜저장 정보가 포함된 요청 헤더 문제 해결, 즉 암호화된 채널을 통해 보안 강화 또는 데이터 저장 및 전송 방법🎜🎜🎜🎜관계형 저장소 문제 해결🎜🎜🎜🎜Cross-browser🎜🎜

🎜로컬 저장소 localstorage🎜🎜저장 방법🎜🎜🎜키-값 쌍 사용( 키-값) 영구적으로 저장되며 수동으로 삭제하지 않는 한 만료되지 않습니다. 도메인 이름당 🎜🎜저장 용량🎜🎜🎜5M. 🎜🎜자주 사용하는 API🎜🎜🎜getItem //기록 가져오기 🎜🎜setItem //기록 설정 🎜🎜removeItem //이동 레코드 삭제🎜🎜key //key🎜🎜clear에 해당하는 값 가져오기 //기록 지우기🎜🎜로컬 저장소 세션스토리지🎜🎜localstorage와 >HTML5의 로컬 저장소 API에 있는 sessionstorage의 사용 방법은 동일하지만 차이점은 sessionstorage는 페이지를 닫은 후 지워지는 반면, localstorage는 수동으로 삭제하지 않는 한 항상 저장됩니다. 🎜🎜오프라인 캐시(애플리케이션 캐시) 🎜🎜애플리케이션에 필요한 로컬 캐시 파일 🎜🎜사용 방법 🎜🎜🎜1. manifest 파일 구성 🎜🎜페이지에서: 🎜

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);

🎜 manifest 파일: 🎜🎜🎜manifest는 캐시된 항목과 캐시되지 않은 항목을 브라우저에 알려주는 가장 간단한 텍스트 파일입니다. 🎜🎜manifest 파일은 세 부분으로 나뉩니다. 🎜🎜🎜🎜🎜CACHE MANIFEST - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다 🎜 🎜🎜 🎜NETWOrK-이 제목 아래의 파일은 서버에 연결해야 하며 캐시되지 않습니다🎜🎜🎜🎜FALLBACK-이 제목 아래의 파일은 다음과 같은 경우 대체 페이지가 필요합니다. 페이지에 액세스할 수 없습니다(예: 404 페이지) 🎜🎜🎜🎜전체 데모🎜🎜

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})

🎜서버에서: 🎜manifest 파일은 올바른 MIME 유형, 즉 text/cache-manifest로 구성되어야 합니다. 🎜🎜일반적으로 사용되는 API🎜🎜🎜핵심은 status 속성이 있는 applicationCache 개체로, 현재 상태를 나타냅니다. 애플리케이션 캐시: 🎜🎜 0 (UNCACHED): 캐시 없음, 페이지와 관련된 애플리케이션 캐시가 없습니다🎜🎜1 (IDLE): 유휴, 애플리케이션 캐시에 업데이트되지 않음🎜🎜2( CHECKING): 설명 파일 확인, 다운로드 및 업데이트 확인 중🎜🎜3(DOWNLOADING): 다운로드 중, 애플리케이션 캐시에서 리소스를 다운로드 중 설명 파일에 지정됨🎜🎜 4(UPDATEREADY): 업데이트가 완료되고 모든 리소스가 다운로드되었습니다🎜🎜5(IDLE): 중단됨, 애플리케이션 캐시 설명 파일 더 이상 존재하지 않으므로 페이지는 더 이상 애플리케이션 캐시에 액세스할 수 없습니다. 🎜🎜관련 이벤트 🎜🎜🎜는 애플리케이션 캐시 상태의 변경 사항을 나타냅니다. 🎜🎜checking: 브라우저가 업데이트를 찾을 때 트리거됩니다. 애플리케이션 캐시에 🎜🎜error: 업데이트 확인 또는 리소스 다운로드 중 오류가 발생할 때 트리거됩니다.🎜🎜noupdate: 설명 파일을 확인하고 파일에 오류가 있음을 발견할 때 트리거됩니다. 변경 사항 없음🎜🎜다운로드 중: 애플리케이션 캐시 리소스 다운로드를 시작할 때 트리거됨🎜🎜진행: 파일 다운로드 애플리케이션 캐시가 계속 다운로드될 때 트리거됨🎜🎜업데이트 준비 code>: 페이지의 새 애플리케이션 캐시가 다운로드되었을 때 트리거됩니다🎜🎜캐시: 애플리케이션 캐시가 완전히 사용 가능하면 트리거됩니다. 🎜🎜애플리케이션 캐시의 세 가지 장점 >: 🎜🎜

1. 离线浏览

2. 提升页面载入速度

3. 降低服务器压力

注意事项：

1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5M）

2. 如果是manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用旧的缓存

3. 引用manifest的html必须与manifest文件同源，在同一个域下

4. 浏览器会自动缓存引用manifest文件的html文件，这就导致了如果更改了html内容，也需要更新版本才能做到最新

5. manifest文件中的CACHE与NETWOrK、FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面

6. FALLBACK中的资源必须和manifest文件同源

7. 更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件

8. 站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问

9. 当manifest文件发生改变时，资源请求本身也会触发更新

离线缓存和传统浏览器缓存的区别

1. 离线缓存是针对整个应用，浏览器缓存是单个文件

2. 离线缓存可以主动通知浏览器更新资源

Web SQL

Web SQL数据库API并不是HTML5规范的一部分，但它是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。

核心方法

1. openDatabase：使用现有的数据库或新建的数据库创建一个数据库对象

2. transaction： 控制一个事务，以及基于这种情况执行提交或回滚

3. executeSql：用于执行实际的SQL查询

打开数据库

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);

执行查询操作

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})

插入数据

注：博客主题里的代码块样式

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

注：需要实现的代码块样式，这个是 markdowpad2 里的操作，也是很多markdown写作工具提供的操作，只需要按一下 tab 键，非常方便

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

读取数据

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i <h2 id="IndexedDB">IndexedDB</h2><p>索引数据库（<code>IndexedDB</code>）<code>API</code>（作为<code>HTML5</code>的一部分）对创建具有丰富本地存储数据的数据密集型的离线<code>HTML5 Web</code>应用程序很有用，同时它还有助于本地缓存数据，使传统在线<code>Web</code>应用程序（比如移动<code>Web</code>应用程序）能够快速的运行和响应。</p><p><strong>异步<code>API</code></strong></p><p>在<code>IndexedDB</code>大部分操作并不是我们常用的调用方法（返回结果的模式），而是（请求-响应模式），比如打开数据库的操作。</p><p>相关推荐：</p><p><a href="http://www.php.cn/html5-tutorial-361331.html" target="_self">前端HTML5几种存储方式的总结</a></p><p><a href="http://www.php.cn/js-tutorial-340047.html" target="_self">JavaScript中变量的存储方式</a></p><p><a href="http://www.php.cn/php-weizijiaocheng-302975.html" target="_self">在PHP中自定义session的存储方式_PHP教程</a></p><p class="comments-box-content"><br></p>

위 내용은 HTML5 저장 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!