H5本地存储
 一、本地存储由来的背景
 
      众所周知Html4时代Cookie的大小、格式、存储数据格式等限制，网站应用如果想在浏览器端存储用户的部分信息，那么只能借助于Cookie。但是Cookie的这些限制，也就导致了Cookie只能存储一些ID之类的标识符等简单的数据，复杂的数据就更别扯了。
下面是Cookie的限制：
 关闭浏览器再打开可读到
1, 大多数浏览器支持最大为 4096 字节的 Cookie。
2, 浏览器还限制站点可以在用户计算机上存储的 Cookie 的数量。大多数浏览器只允许每个站点存储 20 个 Cookie；如果试图存储更多 Cookie，则最旧的 Cookie 便会被丢弃。
3, 有些浏览器还会对它们将接受的来自所有站点的 Cookie 总数作出绝对限制，通常为 300 个。
4, Cookie默认情况都会随着Http请求发送到后台服务器，但并不是所有请求都需要Cookie的，比如：js、css、图片等请求则不需要cookie。
Html5的设计者们，一开始就为Html5能成为富客户端做好了准备。为了破解Cookie的一系列限制，Html5通过JS的新的API就能直接存储大量的数据到客户端浏览器，而且支持复杂的本地数据库，让JS简直就是逆天了。Html5支持两种的WebStorage，一种是永久性的本地存储（localStorage），另外一种是会话级别的本地存储（sessionStorage）。
 
二、会话级别的本地存储：sessionStorage
5MB上限   chrome55   关闭浏览器再打开消失
在Html5中增加了一个Js对象：sessionStorage；通过此对象可以直接操作存储在浏览器中的会话级别的WebStorage。存储在sessionStorage中的数据首先是Key-Value形式的，另外就是它跟浏览器当前会话相关，当会话结束后，数据会自动清除，跟未设置过期时间的Cookie类似。
sessionStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeItem(key):通过key删除本地数据。
（4）clear():清空数据。

<script type="text/javascript">

        //添加key-value 数据到 sessionStorage

        sessionStorage.setItem("demokey", "http://www.javadill.com/");

        //通过key来获取value

        var dt = sessionStorage.getItem("demokey");

        alert(dt);

        //清空所有的key-value数据。

        //sessionStorage.clear();

        alert(sessionStorage.length);

    </script>
         
对于JS的学习和调试必须得有Chrome的调试工具辅助才能事半功倍。当然Chrome也是我最喜爱的Web开发辅助工具，非常简单F12快捷键就立即打开工具了，包括IE也是这个快捷键。通过下图就可以查看当前浏览器中的sessionStorage数据。
 
三、永久本地存储：localStorage
5MB上限   chrome55  关闭浏览器再打开可读到
在最新的JS的API中增加了localStorage对象，以便于用户存储永久存储的Web端的数据。而且数据不会随着Http请求发送到后台服务器，而且存储数据的大小机会不用考虑，因为在HTML5的标准中要求浏览器至少要支持到4MB.所以，这完全是颠覆了Cookie的限制，为Web应用在本地存储复杂的用户痕迹数据提供非常方便的技术支持。那接下里分别介绍一下localStorage的常用的方法，当然基本上跟sessionStorage是一致的。
localStorage提供了四个方法来辅助我们进行对本地存储做相关操作。
（1）setItem(key,value)：添加本地存储数据。两个参数，非常简单就不说了。
（2）getItem(key):通过key获取相应的Value。
（3）removeItem(key):通过key删除本地数据。
（4）clear():清空数据。

<script type="text/javascript">

        //添加key-value 数据到 sessionStorage

        localStorage.setItem("demokey", "http://blog.itjeek.com");

        //通过key来获取value

        var dt = localStorage.getItem("demokey");

        alert(dt);

        //清空所有的key-value数据。

        //localStorage.clear();

        alert(localStorage.length);

    </script>
            
四、逆天了本地数据库
上限百兆没问题，多了没测   chrome55   关闭浏览器再打开可读到
虽然Html5已经提供了功能强大的localStorage和sessionStorage，但是他们两个都只能提供存储简单数据结构的数据，对于复杂的Web应用的数据却无能为力。逆天的是Html5提供了一个浏览器端的数据库支持，允许我们直接通JS的API在浏览器端创建一个本地的数据库，而且支持标准的SQL的CRUD操作，让离线的Web应用更加方便的存储结构化的数据。接下里介绍一下本地数据的相关API和用法。
操作本地数据库的最基本的步骤是：
第一步：openDatabase方法：创建一个访问数据库的对象。
第二步：使用第一步创建的数据库访问对象来执行transaction方法，通过此方法可以设置一个开启事务成功的事件响应方法，在事件响应方法中可以执行SQL.
第三步：通过executeSql方法执行查询，当然查询可以是：CRUD。
接下来分别介绍一下相关的方法的参数和用法。
（1）openDatabase方法：
//Demo：获取或者创建一个数据库，如果数据库不存在那么创建之
var dataBase = openDatabase("student", "1.0", "学生表", 1024 * 1024, function () { });
openDatabase方法打开一个已经存在的数据库，如果数据库不存在，它还可以创建数据库。几个参数意义分别是：
1，数据库名称。
2，数据库的版本号，目前来说传个1.0就可以了，当然可以不填；
3，对数据库的描述。
4，设置分配的数据库的大小（单位是kb）。
5，回调函数(可省略)。
初次调用时创建数据库，以后就是建立连接了。
（2）db.transaction方法可以设置一个回调函数，此函数可以接受一个参数就是我们开启的事务的对象。然后通过此对象可以进行执行Sql脚本，跟下面的步骤可以结合起来。
（3）通过executeSql方法执行查询。
ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)
参数说明：
qlQuery：需要具体执行的sql语句，可以是create、select、update、delete；
value1,value2..]：sql语句中所有使用到的参数的数组，在executeSql方法中，将s>语句中所要使用的参数先用“?”代替，然后依次将这些参数组成数组放在第二个参数中
ataHandler：执行成功是调用的回调函数，通过该函数可以获得查询结果集；
4,errorHandler：执行失败时调用的回调函数；
下面是一个综合的例子，可以看一下：
<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>

H5本地存储（转）的更多相关文章

  1. H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）

    一.Web Storage教程 1.概述: 对于Web Storage来说,实际上是Cookies存储的进化版.如果了解Cookie的人几乎一看Web Storage就会用,如果你从来没用过没了解过C ...

  2. 利用H5本地存储localStorage、sessionStorage

    最近的业务处理上,要使用cookie缓存储一下数据,公司的cookie还搞出点问题.而用户的浏览器都是利用微信的内置,普遍支持h5的本地存储.于是利用了这个... 现代浏览器普遍开始支持H5本地存储, ...

  3. h5 本地存储

    H5本地存储有两个API,一个是Web Storage,还有一个是Web SQL.不管是哪一个,都是基于JavaScript语言来使用,接下来我就教你怎么使用H5本地存储,本文篇幅较大,JS代码较多, ...

  4. H5本地存储详解

    H5之前存储数据一般是通过 cookie ,但是 cookie 存的数据容量比较少.H5 中扩充了文件存储能力,可存储多达 5MB 的数据.现在就实际开发经验来对本地存储 ( Storage ) 的使 ...

  5. H5 本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  6. H5本地存储一

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  7. H5本地存储技术

    H5 Web存储技术 前言 web存储技术在初期的时候被定义为HTML5的一部分作为其API.后来被独立出来作为一份独立的标准. web存储标准包含localStorage对象和sessionStor ...

  8. H5本地存储技术和微信小程序中的本地存储

    1.H5的本地存储 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  9. H5本地存储：sessionStorage和localStorage

    作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...

随机推荐

  1. The Preliminary Contest for ICPC China Nanchang National Invitational

    目录 Contest Info Solutions A. PERFECT NUMBER PROBLEM D. Match Stick Game G. tsy's number H. Coloring ...

  2. ROS理解参数服务器param demo

    param 是一个字典,存储一些变量 param_demo.cpp #include<ros/ros.h> int main(int argc, char **argv){ ros::in ...

  3. php cookie 操作

    创建 cookie <?php setcookie(); ?> 取回 Cookie 的值 <?php // Print a cookie echo $_COOKIE["us ...

  4. Centos7 node npm升级版本

    安装npm 官网:https://nodejs.org/en/download/ 下载LTS Linux Binaries (x64)版本. # tar xf node-v10.16.3-linux- ...

  5. RK3288 查看ddr信息

    转载请注明出处:https://www.cnblogs.com/lialong1st/p/10910949.html CPU:RK3288 系统:Android 5.1 1.查看ddr驱动版本号.容量 ...

  6. idea使用maven私服

    nexus3中央仓库改为阿里云/ 参考:这里写链接内容  找到中央仓库 然后修改成:  http://maven.aliyun.com/nexus/content/groups/public/   1 ...

  7. EINVRES Request to https://bower.herokuapp.com/packages/ failed with 502

    Bower install fails with 502 - Bad Gateway when downloading bower packages. For example bower instal ...

  8. mysql中的sql-mode导致的datetime类型字段不能为0000

    问题描述: 在执行建表语句的时候,出现invalid default datetime value '0000-00-00 00:00:00',从字面意思看,就是不合法的默认值'0000-00-00 ...

  9. C++中的函数库

    函数库是由系统建立的具有一定功能的函数的集合. 库中存放函数的名称和对应的目标代码,以及连接过程中所需的重定位信息.用户也可以根据自己的需要建立自己的用户函数库. "cstdlib" ...

  10. 【PHP】解决数据库查询出来的中文内容显示为问号“??”

    方法一:在数据库连接后执行: mysql_query('SET NAMES utf8'); 代码: $dbconn=mysql_connect("localhost", " ...