H5가 로컬 스토리지와 로컬 데이터베이스를 운영하는 방법-H5 튜토리얼-php.cn

이번에는 H5가 로컬 스토리지와 로컬 데이터베이스를 어떻게 운영하는지, 그리고 H5가 로컬 스토리지와 로컬 데이터베이스를 운영할 때 어떤 주의사항이 있는지 알려드리겠습니다.

Local Storage

1.1 Local Storage의 유래 배경

HTML4 시대에는 쿠키 크기, 형식, 저장 데이터 형식 등의 제한으로 인해 웹사이트 애플리케이션이 원할 경우 사용자 정보 중 일부를 브라우저 측에 저장한 다음 쿠키를 통해서만 저장합니다. 그러나 쿠키의 이러한 제한은 쿠키가 ID와 같은 식별자와 같은 단순한 데이터만 저장할 수 있음을 의미합니다.

다음은 쿠키 제한 사항입니다.

대부분의 브라우저는 최대 4096바이트의 쿠키를 지원합니다.

브라우저에서는 사이트가 사용자 컴퓨터에 저장할 수 있는 쿠키 수도 제한합니다. 대부분의 브라우저는 사이트당 20개의 쿠키만 허용합니다. 더 많은 쿠키를 저장하려고 하면 가장 오래된 쿠키가 삭제됩니다.

일부 브라우저는 모든 사이트에서 허용하는 총 쿠키 수를 일반적으로 300개로 절대 제한합니다.

쿠키는 기본적으로 HTTP 요청과 함께 백엔드 서버로 전송되지만 모든 요청에 쿠키가 필요한 것은 아닙니다. 예를 들어 js, CSS, 사진 등에 대한 요청에는 쿠키가 필요하지 않습니다.

쿠키의 일련의 한계를 극복하기 위해 HTML5는 JS의 새로운 API를 통해 클라이언트 브라우저에 대량의 데이터를 직접 저장할 수 있으며, 복잡한 로컬 데이터베이스를 지원하여 JS를 더욱 효율적으로 만듭니다.

html5는 두 가지 유형의 WebStorage를 지원합니다:

영구 로컬 저장소(localStorage)

세션 수준 로컬 저장소(sessionStorage)

1.2 영구 로컬 저장소: localStorage

최신 JS API에서 localStorage 객체는 다음에 추가됩니다. 사용자가 영구적으로 저장된 웹 측 데이터를 저장할 수 있도록 합니다. 또한 데이터는 Http 요청과 함께 백엔드 서버로 전송되지 않으며 Html5 표준에서는 브라우저가 최소 4MB를 지원하도록 요구하므로 기본적으로 저장된 데이터의 크기를 고려할 필요가 없습니다. 쿠키의 한계를 극복하고 웹에 대한 더 나은 솔루션을 제공합니다. 응용 프로그램은 복잡한 사용자 추적 데이터를 로컬에 저장하여 매우 편리한 기술 지원을 제공합니다. 다음으로 일반적으로 사용되는 localStorage 메소드를 소개하겠습니다.

localStorage는 로컬 저장소에서 관련 작업을 수행하는 데 도움이 되는 네 가지 방법을 제공합니다.

setItem(key,value)은 로컬 저장소 데이터를 추가합니다. 두 매개변수는 매우 간단하므로 자세히 설명하지 않겠습니다.

getItem(key)는 키를 통해 해당 값을 가져옵니다.

removeItem(key)은 키별로 로컬 데이터를 삭제합니다.

clear()는 데이터를 지웁니다.

코드는 다음과 같습니다.

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    localStorage.setItem("demokey", "http://www.shiyanlou.com");
    //通过key来获取value
    var dt = localStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value数据。
    //localStorage.clear();
    alert(localStorage.length);
</script>

로그인 후 복사

1.3 세션 수준 로컬 저장소: sessionStorage

A Js 개체가 HTML5에 추가되었습니다. sessionStorage; 이 개체를 통해 브라우저에 저장된 세션 수준 WebStorage를 직접 사용할 수 있습니다. 움직이는. sessionStorage에 저장된 데이터는 먼저 Key-Value 형태로 존재하며, 세션이 종료되면 만료 시간이 설정되지 않은 쿠키와 마찬가지로 데이터가 자동으로 삭제됩니다. .

sessionStorage는 로컬 저장소에서 관련 작업을 수행하는 데 도움이 되는 네 가지 방법을 제공합니다.

setItem(key,value)은 로컬 저장소 데이터를 추가합니다. 두 매개변수는 매우 간단하므로 자세히 설명하지 않겠습니다.

getItem(key)는 키를 통해 해당 값을 가져옵니다.

removeItem(key)은 키별로 로컬 데이터를 삭제합니다.

clear()는 데이터를 지웁니다.

코드는 다음과 같습니다.

<script type="text/javascript">
    //添加key-value 数据到 sessionStorage
    sessionStorage.setItem("demokey", "http://blog.itjeek.com");
    //通过key来获取value
    var dt = sessionStorage.getItem("demokey");
    alert(dt);
    //清空所有的key-value数据。
    //sessionStorage.clear();
    alert(sessionStorage.length);
</script>

로그인 후 복사

1.4 강력한 로컬 데이터

HTML5는 이미 강력한 localStorage와 sessionStorage를 제공하지만 둘 다 단순한 데이터 구조를 저장하는 데이터만 제공할 수 있어 복잡한 웹 애플리케이션에는 적합하지 않습니다. 데이터는 무력합니다. 놀라운 점은 HTML5가 브라우저 측 데이터베이스 지원을 제공하여 JS API를 통해 직접 브라우저 측에 로컬 데이터베이스를 생성할 수 있게 하고 표준 SQL CRUD 작업을 지원하여 오프라인 웹 애플리케이션이 구조화된 데이터를 보다 편리하게 저장할 수 있게 해준다는 것입니다. 다음으로 관련 API와 로컬 데이터의 사용법을 소개하겠습니다.

로컬 데이터베이스를 운영하는 가장 기본적인 단계는 다음과 같습니다.

1단계: openDatabase 메서드: 데이터베이스에 액세스하기 위한 개체를 만듭니다.

第二步：使用第一步创建的数据库访问对象来执行transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL.

第三步：通过executeSql方法执行查询，当然查询可以是：CRUD。

接下来分别介绍一下相关的方法的参数和用法。

1.4.1 openDatabase方法

//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之

var dataBase = openDatabase(“student”, “1.0”, “学生表”, 1024 * 1024, function () { });

로그인 후 복사

openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：

数据库名称。

数据库的版本号，目前来说传个1.0就可以了，当然可以不填；

对数据库的描述。

设置分配的数据库的大小（单位是kb）。

回调函数(可省略)。

初次调用时创建数据库，以后就是建立连接了。

1.4.2 db.transaction方法

可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以执行SQL脚本。

1.4.3 executeSql方法执行查询

ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)

로그인 후 복사

参数说明：

qlQuery：需要具体执行的sql语句，可以是create、select、update、delete;

[value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将s>语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中;

dataHandler：执行成功时调用的回调函数，通过该函数可以获得查询结果集;

errorHandler：执行失败时调用的回调函数;

1.5 综合实例

<head>
 <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function initDatabase() {
            var db = getCurrentDb();//初始化数据库
            if(!db) {alert("您的浏览器不支持HTML5本地数据库");return;}
            db.transaction(function (trans) {//启动一个事务，并设置回调函数
                //执行创建表的Sql脚本
                trans.executeSql("create table if not exists Demo(uName text null,title text null,words text null)", [], function (trans, result) {
                }, function (trans, message) {//消息的回调函数alert(message);});
            }, function (trans, result) {
            }, function (trans, message) {
            });
        }
        $(function () {//页面加载完成后绑定页面按钮的点击事件
            initDatabase();
            $("#btnSave").click(function () {
                var txtName = $("#txtName").val();
                var txtTitle = $("#txtTitle").val();
                var txtWords = $("#txtWords").val();
                var db = getCurrentDb();
                //执行sql脚本，插入数据
                db.transaction(function (trans) {
                    trans.executeSql("insert into Demo(uName,title,words) values(?,?,?) ", [txtName, txtTitle, txtWords], function (ts, data) {
                    }, function (ts, message) {
                        alert(message);
                    });
                });
                showAllTheData();
            });
        });
        function getCurrentDb() {
            //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
            //如果数据库不存在那么创建之
            var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
            return db;
        }
        //显示所有数据库中的数据到页面上去
        function showAllTheData() {
            $("#tblData").empty();
            var db = getCurrentDb();
            db.transaction(function (trans) {
                trans.executeSql("select * from Demo ", [], function (ts, data) {
                    if (data) {
                        for (var i = 0; i < data.rows.length; i++) {
                            appendDataToTable(data.rows.item(i));//获取某行数据的json对象
                        }
                    }
                }, function (ts, message) {alert(message);var tst = message;});
            });
        }
        function appendDataToTable(data) {//将数据展示到表格里面
            //uName,title,words
            var txtName = data.uName;
            var txtTitle = data.title;
            var words = data.words;
            var strHtml = "";
            strHtml += "<tr>";
            strHtml += "<td>"+txtName+"</td>";
            strHtml += "<td>" + txtTitle + "</td>";
            strHtml += "<td>" + words + "</td>";
            strHtml += "</tr>";
            $("#tblData").append(strHtml);
        }
    </script>
</head>
    <body>
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>
            </tr>
               <tr>
                <td>标题：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>
            </tr>
            <tr>
                <td>留言：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>
            </tr>
        </table>
        <input type="button" value="保存" id="btnSave"/>
        <hr/>
        <input type="button" value="展示所哟数据" onclick="showAllTheData();"/>
        <table id="tblData">
        </table>
    </body>
</html>

로그인 후 복사

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！