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. java.util.Scanner简单应用

    import java.util.Scanner; import java.io.*; public class FileScannerTest{ public static void main(St ...

  2. Chrome 控制台指南

    转自:http://blog.jobbole.com/76985/ Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更 ...

  3. Foundation 5 发布！最先进的响应式前端框架

    数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架.Foundation 是第一个响应式.语义化和移动优先的开源框架.最新发布的 Foundation 5 是最先 ...

  4. mysql插入日期 vs oracle插入日期

    今天做oracle日期插入的时候突然开始疑惑日期是如何插入的. 用框架久了,反而不自己做简单的工作了.比如插入. 通常,新建一个表对象,然后绑定数据,前端form提交,后端getModel后直接mod ...

  5. Elasticsearch 动态映射——自动检测

    ES中有一个非常重要的特性——动态映射,即索引文档前不需要创建索引.类型等信息,在索引的同时会自动完成索引.类型.映射的创建. 那么什么是映射呢?映射就是描述字段的类型.如何进行分析.如何进行索引等内 ...

  6. 语义化HTML：p、h1-6、q、blockquote、hr、address、code、pre、var、cite、dfn和samp

    一.元素语义 p标签 W3C草案: The p element represents a paragraph.W3C specification 语义化的 <p>元素 表示:文章中的段落. ...

  7. Ionic2学习笔记（0）：HelloWorld

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE D ...

  8. 实时数据显示--SignalR实例演示

    近段时间,有实现一个看板的功能,就是用户更新信息时,即是对数据库的数据进行插入,更新,或是删除时,在墙上的屏幕的数据不需要人为去刷新,用户就能看到更新后的数据. 实现此功能,Insus.NET使用Si ...

  9. 为html.EditorFor添加样式

    有网友问及,怎样为html.EditorFor添加样式. 解决方法,可以参考下面语法: 先new一个htmlAttributes. @model Book @using Insus.NET.Model ...

  10. C#调用Java方法（详细实例）

    C#可以直接引用C++的DLL和转换JAVA写好的程序.最近由于工作原因接触这方面比较多,根据实际需求,我们通过一个具体例子把一个JAVA方法转换成可以由C#直接调用的DLL C#调用c++ C#调用 ...