文档章节

html5 本地化存储Web Storage

alonelywolf
 alonelywolf
发布于 2015/01/24 16:07
字数 688
阅读 464
收藏 11
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5 本地化存储Web Storage</title>
    <script type="text/javascript">
        /**
         * html5中新增web storage 本地化存储sessionStorage,localStorage,
         *  可以替代以前的cookie。
         *  cookie 可以保存4kb的信息;
         *  cookie是随着http发送的,耗费一定的带宽;
         *   cookie除了添加,删除,设置有效期外,很难进行其他操作。
         *
         *
         *   sessionStorage: 一次会话有效,类似于servlet中的session;
         *   localStorage :可以存储到本地,永久保存。
         *
         */
        //保存数据
        function saveData(){
            var mail = document.getElementById("mail");

            //将信息保存到session中
            sessionStorage.setItem("mail",mail.value);
              //将信息存储到本地
            localStorage.setItem("email",mail.value);
        }

        //读取数据
        function loadData(){

            var msg = document.getElementById("msg");
            //清除sessionStorage中的信息
            sessionStorage.clear();
            //从sessionStorage 中获取信息
           var mail =  sessionStorage.getItem("mail");


            //从localStorage中获取信息
            var email = localStorage.getItem("email");
            msg.value=mail+" , "+email;

        }

    </script>
</head>
<body>

    <input type="text" id="mail" >


   <textarea rows="10" cols="7" id="msg"  placeholder="数据显示区域">
   </textarea>


   <input type="button" onclick="saveData();" value="保存数据">
       <input type="button" onclick="loadData();" value="读取数据">


<form>
    <table>

        <tr>
            <td>用户名:</td>
            <td><input type="text" id="name" ></td>

        </tr>

        <tr>
            <td>年龄:</td>
            <td><input type="text" id="age" ></td>

        </tr>

        <tr>
            <td>邮箱:</td>
            <td><input type="text" id="em" ></td>

        </tr>

        <tr>
<td></td>

            <td><input type="button" value="保存信息" onclick="saveUser();" >
                <input type="button" value="查询信息"  onclick="getUser();">


                <input type="button" value="保存信息到数据库" onclick="saveUserToDB();" >
                <input type="button" value="从数据库中查询信息"  onclick="getUserFromDB();">

            </td>

        </tr>

    </table>





</form>

<script type="text/javascript">
    /**
     * 模拟本地化存储
     */
    function saveUser(){
        var user = new Object;
        //定义属性并赋值
        user.username=document.getElementById("name").value;
        user.age=document.getElementById("age").value;
        user.mail = document.getElementById("em").value;

        //将对象转化为json字符串
        var data = JSON.stringify(user);
        sessionStorage.setItem("user",data);
        console.info("保存user对象成功..."+data);
    }


    function getUser(){
          //获取到的JSON字符串
        var user = sessionStorage.getItem("user");
        var msg = document.getElementById("msg");

        //将json字符串格式化为对象
        //下面两种方法都可行
       // var info =JSON.parse(user);
        var info = eval('('+user+')');
        var result = info.username+","+info.age+","+info.mail;
        msg.value =result;
        console
                .info(user+","+info);//{"username":"23456","age":"wefr","mail":"fesdbg"},[object Object]
    }


    function saveUserToDB(){

        var user = new Object();
        user.username=document.getElementById("name").value;
        user.age=document.getElementById("age").value;
        user.mail = document.getElementById("em").value;
        /**
         * 类似嵌入式系统中的'SQLite'数据库,
         * Firefox 35.0 不支持,
         * chrome支持
         * @type {Database}
         */
        var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);
        console.info("数据库信息:"+db);

        db.transaction(function(tx){
            //创建表
            var sql='create table if not exists user(id int,name varchar(100),age int ,mail varchar(100) ) ';
          tx.executeSql(sql);

        });
        db.transaction(function(tx){
            //保存数据到数据库
           tx.executeSql('insert into user values (1,?,?,?)',[user.username,user.age,user.mail],
                   //成功的回调函数
            function(tx,msg){
                console.info("执行sql语句成功:"+msg);
                //失败的回调函数
            },function(tx,msg){

                console.info("执行sql语句失败:"+msg);

            });
        });




    }


    function getUserFromDB(){
 //获取数据库
        var db =window.openDatabase("html5",'1.0','WebStorage',2*1024*1024);

        db.transaction(function(tx){
            /**
             * 执行查询
             */
            tx.executeSql('select id,name,age,mail from user where id=?',[1],function(tr,msg){
                /**
                 * 遍历结果集
                 */
                for (var i=0;i<msg.rows.length;i++){
                    //获取一条记录封装后的对象
                    //msg.rows.item(i).id ,--.name,--.mail获取指定的信息
                    console.info(msg.rows.item(i));
                }

            });
        });





    }


</script>

</body>
</html>


© 著作权归作者所有

alonelywolf
粉丝 4
博文 62
码字总数 34590
作品 0
丰台
程序员
私信 提问
HTML5 本地存储

HTML5的本地化存储标准主要有以下3类: (1) Web Storage (2) Web SQL Database (3) IndexedDB 一、Web Storage Web Storage是目前得到支持最广泛的HTML5本地存储规范,IE 8+、FF 3.5+、Safar...

Aaron_DMC
2016/11/21
286
1
HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。 sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结...

lg2045
2014/10/09
0
0
localstorage、sessionstorage的用法

html5 中的 web Storage 包括了两种存储方式:sessionStorage 和 localStorage。 sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问,会话...

韦姣敏
2017/11/04
0
0
HTML 5 Web 存储-sessionStorage和localStorage

HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 sessionStorage用于本地存储一个会话(session)中的数...

两毛五哥哥
2017/11/02
0
0
HTML5学习之Web Storage基础知识

HTML5 Web 存储 在HTML5 Web Storage还没出来之前,本地存储使用的是 cookie. 但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可...

CHIEMINCHAN
2018/05/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

再一次生产 CPU 高负载排查实践

前言 前几日早上打开邮箱收到一封监控报警邮件:某某 ip 服务器 CPU 负载较高,请研发尽快排查解决,发送时间正好是凌晨。 其实早在去年我也处理过类似的问题,并记录下来:《一次生产 CPU ...

crossoverJie
19分钟前
1
0
Java的线程同步和并发问题示例

并发问题 多线程是一个非常强大的工具,它使我们能够更好地利用系统的资源,但我们需要在读取和写入多个线程共享的数据时特别小心。 当多个线程尝试同时读取和写入共享数据时,会出现两种类型...

hiuh
今天
4
0
Spring Boot 常用注解说明

实体类 @Entity (实体类注解) @Table(可指定表名) @Data(可缺省get/set) @Id(指定属性主键) @GeneratedValue(指定主键生成规则) @Transient(表示此数据不在数据库表里建立属性) ...

兜兜毛毛
今天
3
0
局域网能互相ping通,ubuntu虚拟机不能上外网

【问题】 桥接模式老是无法上网,查看本机IP发现被分配了一个私网地址,猜测应该是虚拟DHCP服务器没有打开,于是查看Ubuntu的网络配置: /etc/network/interfaces 发现没有dhcp配置的信息,只...

tahiti_aa
今天
2
0
以太坊助记词PHP开发包简介

以太坊助记词PHP开发包用来为PHP以太坊应用增加助记词和层级确定密钥支持能力。下载地址:以太坊助记词php开发包 。 1、开发包概述 以太坊助记词PHP开发包主要包括以下特性: 生成符合BIP39...

汇智网教程
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部