HTML5 ローカルストレージ:database_html5 チュートリアルのスキルがない場合はどうなるか

WBOY

リリース： 2016-05-16 15:49:39

オリジナル

1658 人が閲覧しました

はじめに

この章の主な内容は Web ストレージとローカルデータベースです。Web ストレージは HTML5 の新機能であり、クライアント上にデータベースを作成するために使用できます。

サーバー側の負担を大幅に軽減し、データへのアクセスを高速化します。

この章を学習するには、Web Storage の基本概念をマスターし、sessionStorage と localStorage の使用法と違いを理解する必要があります

ローカルデータベースの使い方をマスターする

WebStorage とは何ですか? 前述したように、WebStorage は Cookie を最適化したものであり、HTML4 はクライアントにユーザーデータを保存するために Cookie を使用します。

<span style="COLOR: #000000">大小限制在4kbcookie每次随HTTP事务一起发送，浪费带宽正确操作cookie很复杂（这个有待考虑）</span>

ログイン後にコピー

上記の問題のため、HTML5 では新しいクライアント側のローカルストレージテクノロジとして WebStorage を提案しています。

コードをコピーしますコードは次のとおりです:

Web Storage テクノロジーはデータを
sessionStrage:
セッションとは、ユーザーが Web サイトを閲覧するときに、Web サイトにアクセスしてから Web サイトを閉じるまでの時間を指します。セッションオブジェクトは一定期間のみ有効です。

localStorage:
データが何であれ、クライアントハードウェアデバイスにデータを保存します。つまり、次回コンピュータの電源を入れたときにもデータがそこに存在します。

この 2 つの違いは、1 つは一時保管用で、もう 1 つは長期保管用であるということです。

使用例

コードをコピーコードは次のとおりです

単純なアプリケーション

Web ストレージ実験

Chromeブラウザで見るとそれを感じます。

簡易 Web 掲示板

コードをコピーコードは次のとおりです:

简单留言板

</ title><br> </head><br> <body><br> <h1><br> Web ストレージ实验</h1><br> <div id="msg" style="margin : 10px 0; ボーダー: 1px 無地; パディング: 10px; 幅: 300px;<br /> 最小高さ: 100px;"><br> </div><br> <input type="text" id ="text" /><br> <button onclick="save();"><br> 留言</button><br> <button onclick="_clear();"><br> 清空</button><br> <script type="text/javascript"><br> var msg = document.getElementById('msg'),<br> text = document.getElementById('text') ;<br> <br> function save() {<br> var str = text.value;<br> var k = new Date().getTime();<br> localStorage.setItem(k, str);<br> init();<br> }<br> <br> function init() {<br> msg.innerHTML = '';<br> var dom = '';<br> for (var i = 0, len = localStorage.length;私は＜レン。 i ) {<br> dom = '<div>' localStorage.key(i) ':' localStorage.getItem(localStorage.key(i)) '</div>'<br> }<br> msg.innerHTML = dom;<br> }<br> <br> function _clear() {<br> msg.innerHTML = '';<br> localStorage.clear();<br> }<br> <br> </script><br> </body><br> </html><br> </div> <br> <p><img alt="" src="http://files.jb51.net/file_images/article/201304/2013042510451022.jpg"></p> <p>さらに高度な使用では、データベーステーブルとして使用する目的で、値を json 文字列として使用できます。</p> <p>本地データ库 </p> <p> HTML5 には、SQL 経由でアクセスできるデータフィールド (新しいブラウザー結果真拡張!) が組み込まれています。そのため、HTML4 ではデータのみがサーバー端末に存在しますが、HTML5 ではこれが変更されています。 </p>このようなサーバーに保存する必要のない有名なコードは「SQLLite」です (我终関知道他是干什么的了)<p><br><span style="COLOR: #000000"><br><div class="msgheader"><div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode60'));">复制代案<u></u></span>代案次:</div></div> <div class="msgborder" id="phpcode60">SQLLite データベース库を使用、必要な 2 つ:<br>创建データベース库访问对オブジェクト<br>使用事务处処理</span> </p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="COLOR: #000000">创建对:<br>openDatabase(dbName, version, dbDesc, size)</span></pre> <pre class="brush:php;toolbar:false"><span style="COLOR: #000000">实际访问：<br>db.transaction(function () {<br> tx.excuteSql('create table ......'); <br>});</span></pre> <pre class="brush:php;toolbar:false"><span style="COLOR: #000000">数据查询：<br>excuteSql(sql, [], dataHandler, errorHandler)//後面两个為回调関数；[]估计是做sql注入处理<br><br> </div></span> </p> </div>光说不练假握式，我们来实际操作一番，使用データ库实现web通讯录（左思右想还是用上了jQuery）：<p> </p>做的時居然出版现我的FF不支持本地データ库！！以下はchromeで完成した简单の通讯录：<p><br><br></p> <div class="msgheader"> <div class="right"> <span style="CURSOR: pointer" onclick="copycode(getid('phpcode61'));">备制代<u></u></span>代码如下:</div> <div class="msgborder" id="phpcode61"> <br>通讯录<br> <!DOCTYPE html ><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head> <br> <title>