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. MVVM模式下，ViewModel和View，Model有什么区别

    摘自正美的5群 Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model. View:也很简单,就是展现出来的用户界面. 基本上,绝大多数软件所做的工 ...

  2. WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...

  3. CSS默认可继承样式

    前面的话 一直想总结出一份可继承样式的列表.常听说,颜色和字体是可继承的,盒模型样式是不可继承的,但其他样式呢?本文内容包括所有可继承的样式 [注意]关于样式的详细信息移步至此 常用可继承样式 col ...

  4. poj 2031Building a Space Station(几何判断+Kruskal最小生成树)

    /* 最小生成树 + 几何判断 Kruskal 球心之间的距离 - 两个球的半径 < 0 则说明是覆盖的!此时的距离按照0计算 */ #include<iostream> #incl ...

  5. SQLServer学习笔记系列8

    一.写在前面的话 最近一直在思考一个问题,什么才能让我们不显得浮躁,真正的静下心来,用心去感受,用心去回答每个人的问题,用心去帮助别人.现实的生活,往往让我们显得精疲力尽,然后我们仔细想过没用,其实支 ...

  6. MVC学习之前必须掌握的c#基础知识

    一.类自动属性 public class Person { //自动属性 public string Name { get; set; } private int _age; public int a ...

  7. LeetCode - Flatten Binary Tree to Linked List

    题目: Given a binary tree, flatten it to a linked list in-place. For example, Given 1 / \ 2 5 / \ \ 3 ...

  8. C#模拟键盘输入（一）

    主要使用了Windows API 实现,你可以在你C盘下的system32文件夹中找到user32.dll,函数的说明在MSDN都有,只需要拿名字去搜一下就行 根据窗口的类名和窗口名称获取窗口句柄,成 ...

  9. [Asp.net 5] DependencyInjection项目代码分析4-微软的实现（1）

    前面俩种实现中,很多内部细节都无法知道,微软的框架也是为了屏蔽具体实现,只让我们关注接口.但是人都是充满好奇的,依赖注入到底是怎么实现的呢? 微软又有怎样的实现呢?下面就为大家一一呈现(说实话,代码真 ...

  10. Winform开发主界面菜单的动态树形列表展示

    我在之前很多文章里面,介绍过Winform主界面的开发,基本上都是标准的界面,在顶部放置工具栏,中间区域则放置多文档的内容,但是在顶部菜单比较多的时候,就需要把菜单分为几级处理,如可以在顶部菜单放置一 ...