H5의 로컬 스토리지와 로컬 데이터베이스에 대한 자세한 소개-HTML 튜토리얼-php.cn

이번에는 H5의 로컬 스토리지와 로컬 데이터베이스에 대해 자세히 소개하겠습니다. H5의 로컬 스토리지와 로컬 데이터베이스 사용 시 주의사항은 무엇인가요?

로컬 스토리지

1.1 로컬 스토리지의 탄생 배경

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 메서드: 데이터베이스에 액세스하기 위한 개체를 만듭니다.

두 번째 단계: 첫 번째 단계에서 생성한 데이터베이스 액세스 객체를 사용하여 트랜잭션 메서드를 실행합니다. 이 메서드를 통해 트랜잭션을 성공적으로 시작하기 위한 이벤트 응답 메서드를 설정할 수 있습니다.

3단계: 통과 ExecutionSql 메서드는 쿼리를 실행합니다. 물론 쿼리는 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脚本。

<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&#39;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中文网其它相关文章！