Web存储

html5可以在本地存储用户浏览的数据，数据的存储原理是以 键/值 存储的

存储对象分类

  1. localStorage：没有时间限制的数据存储
  2. sessionStorage：针对一个会话的数据存储

常用的API

（以localStorage为例，sesstionStorage同理）

  • 保存数据：localStorage.setIterm(key,value);
  • 读取数据：localStorage.getIterm(key);
  • 移除单个数据：localStorage.removeIterm(key);
  • 移除所有数据：localStorage.clear();
  • 得到某个索引的key：localStorage.key(index);
  • 点击计数：localStorage.clickcount();

实例（能够记忆用户的密码和账号）：

<!DOCTYPE html>
<html>
  <head>
    <title>登 录 页 面</title>
    <meta name="content-type" content="text/html; charset=UTF-8">

    <style>
        div{border:2px groove #ddd};
    </style>

  </head>
  <body onload = "loadAll()">
    <form action = "afterlogin.jsp">
        <div>
        name:<input type = "text" name = "user" id = "user" onblur = "read()"><br>
        password:<input type = "password" name = "pw" id = "pw"><br>
        <input type = "checkbox" onclick = "choice()" name = "rem" id = "rem"><span id = "res">永远记住我</span><br>
        </div>
        <br>
        登录：<input type = "image" src = "nexview.gif" width = "20px" height = "20px"alt = "Submit" title = "Submit" onclick= "save()">
    </form>
    <br>
       <button onclick = "count()">点我</button>计数：<span id = "count"></span>
    <div id = "list"></div>

  <script>
  function count(){
    if(typeof(Storage)!=="undefined")
    {
            if (localStorage.clickcount)
            {
            localStorage.clickcount=Number(localStorage.clickcount)+1;
            }
            else
            {
            localStorage.clickcount=1;
            }
            document.getElementById("count").innerHTML="你已经点击了该按钮 " + localStorage.clickcount + " 次 ";
    }
    else
    {
            document.getElementById("count").innerHTML="抱歉，您的浏览器不支持 web 存储";
    }
  }

    function choice(){
        var cb = document.getElementById("rem");
        if(cb.value != "1"){
            cb.value = "1";
            document.getElementById("res").innerHTML = "忘记我";
        }else{
            cb.value = "0";
            document.getElementById("res").innerHTML = "永远记住我";
        }
    }

    function save(){
        //判断用户是否选择了记住用户名和密码
        if(document.getElementById("rem").value = "1"){
            //创建一个对象
            var info = new Object;
            //获得用户输入的值
            info.user = document.getElementById("user").value;
            info.pw = document.getElementById("pw").value;
            //将对象转化为字符串
            var str = JSON.stringify(info);
            //将数据存储到localStorage中
            localStorage.setItem(info.user,str);
        }
    }

    function read(){
        //获得用户输入的名称
        var user = document.getElementById("user").value;
        //通过用户用户名获得存储数据的对象
        var str = localStorage.getItem(user);
        //将对象转化为字符串
        var sstr = JSON.parse(str);

        var spw = document.getElementById("pw");
        spw.value = sstr.pw;
    }

    //将所有存储在loadStorage中的对象提取出来
    function loadAll(){
        var list = document.getElementById("list");
        if(localStorage.length>0){
            var result = "<table border='1'>";
            result += "<tr><td>用户</td><td>密码</td></tr>";
            for(var i=0;i<localStorage.length;i++){
                //依次获得每一个对象
                var user = localStorage.key(i);
                var str = localStorage.getItem(user);
                //将对象转化为字符串
                var sstr = JSON.parse(str);
                result += "<tr><td>"+user+"</td><td>"+sstr.pw+"</td></tr>";
            }
            result += "</table>";
            list.innerHTML = result;
        }else{
            list.innerHTML = "数据为空...";
        }
    }
  </script>
  </body>
</html>

Web存储和jsp内置对象简单比较

相同点：

  • 都可以作为一个容器来存网页中的数据

不同点：

  • Web存储用于HTML（静态网页）中，而JSP内置对象用于jsp（动态网页）中。
  • Web存储只有两种类型（localStorage、sessionStorage）， JSP的内置对象有十多个（application、session、request、config、exception、out、response、pageContext、page…..）。

【html5】Web存储_locaStorage对象的应用的更多相关文章

  1. HTML5 Web存储(Web Storage)技术及用法

    在如今的Web开发中,HTML5是大家讨论的最大一个话题.HTML5提供的新功能特征使得Web程序员如虎添翼,并免去了以往钻研各种方法来让网站更好.更快.更灵活的气力.这些新功能中有一个非常让我感兴趣 ...

  2. HTML5 web 存储

    简介: HTML5 web 存储,一个比cookie更好的本地存储方式. 首先我们先了解一下: 什么是 HTML5 Web 存储? 使用html5可以在本地存储用户的浏览数据. 早些时候,本地存储使用 ...

  3. HTML5 Web存储 页面间进行传值

    在实际使用过程中,经常会遇到需要在页面间进行传值的情况,最初设想一定需要后端才能进行数据的存储和读取,或者在本地使用一个cookie进行保存,直到了解到HTML5 Web存储 使用HTML5的新特性可 ...

  4. 面试之HTML5 Web存储

    前几天面试遇到了一个题是问localStorage和sessionStorage的区别,当时的回答不是很全面,今天就针对这个问题做一下整理(概念,用法,区别) HTML5 Web存储,一个比 cook ...

  5. HTML5: HTML5 Web 存储

    ylbtech-HTML5: HTML5 Web 存储 1.返回顶部 1. HTML5 Web 存储 HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储 ...

  6. 有趣的HTML5 Web 存储

    HTML5 web 存储,一个比cookie更好的本地存储方式. 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据. 早些时候,本地存储使用的是 cookie.但是Web ...

  7. 【读书笔记】HTML5 Web存储

    PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL.     Cookie   Cookie是HTML4中在客户端 ...

  8. HTML5本地化应用开发-HTML5 Web存储详解

    文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的.我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成. ...

  9. HTML5 web存储

    既然涉及到HTML5知识,那么必定会存在一定的兼容性问题,这里就涉及到浏览器的支持情况了. 浏览器支持情况: Internet Explorer 8+, Firefox, Opera, Chrome, ...

随机推荐

  1. jQuery事件流的顺序

    <div id="aaron"> <div id='test'> <ul> <p>点击p被委托,ul被阻止了,因为内部重写了事件对象 ...

  2. OpenCascade Application Framework Introduction

    OpenCascade Application Framework Introduction eryar@163.com 本教程介绍了Open CASCADE程序框架(Application Fram ...

  3. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  4. CardLayout布局练习（小的图片浏览器）

    /* 涉及Panel中的图片的加载,还有Frame的关闭的方法, CardLayout(int hgap, int vgap)就会决定卡片面板的大小 匿名类的使用... */ import java. ...

  5. timus_1007_代码字

    题目要求:对于所有一个长度为N的字(这些字由0和1组成),在经过一条线路后,这些字可能会做如下的修改: 1. 0可能变成1,但只能发生一次. 2. 0或者1可能被去掉,但也只能发生一次. 3. 0或者 ...

  6. 【干货】如何通过OPC自定义接口来实现客户端数据的读取？

    上篇博文分享了我的知识库,被好多人关注,受宠若惊.今天我把我在项目中封装的OPC自定义接口的程序分享一下.下面将会简单简单介绍下OPC DA客户端数据访问,以及搭配整个系统的运行环境. OPC(OLE ...

  7. Sybase 数据库bcp out备份重要表数据

    bcp相当于逻辑备份,bcp out导出的文件,bcp in可以导回去. 环境:RHEL 5.5 + Sybase客户端软件 需求:在客户端(Linux)备份服务端(HP-UX)重要配置表数据 1.b ...

  8. 探秘Tomcat（一）——Myeclipse中导入Tomcat源码

    前言:有的时候自己不知道自己是井底之蛙,这并没有什么可怕的,因为你只要蜷缩在方寸之间的井里,无数次的生活轨迹无非最终归结还是一个圆形:但是可怕的是有一天你不得不从井里跳出来生活,需要重新审视井以外的生 ...

  9. iframe的内容增高或缩减时设置其iframe的高度的处理方案

    WEB管理软件往往是如下结构的 用户点击子页tab切换中部的显示内容,在切换过程中需要保证前面的子页保持先前的状态.这种情况一般都使用iframe来来作为切换的子页显示内容. 但是这里有一个问题,if ...

  10. WCF服务创建与使用（请求应答模式）

    不说废话,直接上代码.以下服务创建是在独立的WCF类库中,若采用WCF应程程序,定义及创建服务代码均相同,但文件名不同,是CalculatorService.svc 第一步,定义服务契约(Servic ...