<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>第六个页面</title>

        <style>

            body{

                font-family: "微软雅黑";

                max-width: 600px;

                padding: 0px 30px;

            }

            fieldset{

                margin-bottom: 15px;

                padding: 10px;

            }

            legend{

                padding: 0px 3px;

                font-weight: bold;

                font-variant: small-caps;

            }

            label{

                width:140px;

                display: inline-block;

                vertical-align: top;

                margin: 6px;

            }

            input{

                margin-top: 12px;

                width: 300px;

            }

        </style>

        <script type="text/javascript">

            function saveData(){

                var name = document.getElementById("name");

                var age = document.getElementById("age");

                localStorage.setItem("localData",name.value);

                sessionStorage.setItem("sessionData",age.value);

            }

            function loadData(){

                var name = document.getElementById("name");

                var age = document.getElementById("age");

                var localData = localStorage.getItem("localData");

                var sessionData = sessionStorage.getItem("sessionData");

                if(localData != null){

                    name.value = localData;

                }

                if(sessionData != null){

                    age.value = sessionData;

                }

            }

        </script>

    </head>

    <body>

        <fieldset>

            <legend>Web Storage</legend>

            <label>姓名</label>

            <input id="name" type="text" value="" /><br/>

            <label>年龄</label>

            <input id="age" type="number" value="" />

        </fieldset>

        <div>

            <button onclick="saveData()">Save</button>

            <button onclick="loadData()">Load</button>

        </div>

    </body>

</html>

HTML5入门7---"session的会话缓存"和"localStorage的cookie"缓存数据的更多相关文章

  1. web性能优化之--合理使用http缓存和localStorage做资源缓存

    一.前言 开始先扯点别的: 估计很多前端er的同学应该遇到过:在旧项目中添加新的功能模块.或者修改一些静态文件时候,当代码部署到线上之后,需求方验收OK,此时你送了一口气,当你准备开始得意于自己的ma ...

  2. {Django基础八之cookie和session}一 会话跟踪 二 cookie 三 django中操作cookie 四 session 五 django中操作session

    Django基础八之cookie和session 本节目录 一 会话跟踪 二 cookie 三 django中操作cookie 四 session 五 django中操作session 六 xxx 七 ...

  3. Html5之localStorage和sessionStorage缓存

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

  5. Java EE : 三、图解Session（会话）

    目录 Java EE : 一.图解Http协议 Java EE : 二.图解 Cookie(小甜饼) Java EE : 三.图解Session(会话) 概述 一.Session由来 二.Sessio ...

  6. 推荐10个适合初学者的 HTML5 入门教程

    HTML5 作为下一代网站开发技术,无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者,都值得去研究.借助尖端功能,技术和 API,HTML5 允许你创建响应性.创新性.互动性以及令人惊叹的 ...

  7. Cookie&Session（会话技术）

    一．Cookie技术 从打开一个游览器访问某个站点,到关闭这个游览器的整个过程成为一次会话 会话技术分为Cookie和Session Cookie:数据存储在客服端本地,减少对服务端的存储的压力,安全 ...

  8. JavaEE 要懂的小事：三、图解Session（会话）

    Writer      :BYSocket(泥沙砖瓦浆木匠) 微         博:BYSocket 豆         瓣:BYSocket FaceBook:BYSocket Twitter   ...

  9. 【转】java：Session（会话）机制详解

    书中讲:以下情况,Session结束生命周期,Servlet容器将Session所占资源释放:1.客户端关闭浏览器2.Session过期3.服务器端调用了HttpSession的invalidate( ...

随机推荐

  1. 在项目中 background transiton 带来的"便利"与“坑”

    本文就两个例子跟大家分享一下background-image与background-size的渐变(transition)所带来的方便与“深坑” 首选,说说这东西好的地方,有时候在做PC项目的时候,可 ...

  2. 简单实用的PHP验证码类

    一个简单实用的php验证码类,分享出来 ,供大家参考. 代码如下: <?php /** @ php 验证码类 @ http://www.jbxue.com */ Class code { var ...

  3. GridView数据源绑定的一个小问题

    在使用GridView绑定数据源的时候,遇到了一个问题,因为图简单,没有注意到,贴出错误截图: 找了半天没有找出错误,在网上找了之后,才发现是一个细节引起的错误. 后台是这样写的: namespace ...

  4. apache ab的安装步骤

    1:到apache官方网站http://httpd.apache.org/download.cgi#apache24下载最新版本的apache,然后解压,执行如下命令: ./configure –pr ...

  5. Log Parser 2.2

    Log Parser 2.2 是一个功能强大的通用工具,它可对基于文本的数据(如日志文件.XML 文件和 CSV 文件)以及 Windows 操作系统上的重要数据源(如事件日志.注册表.文件系统和 A ...

  6. final ，override关键字

    final 有时我们会定义这样一种类,我们不希望其他类继承它,或者不想考虑它是否适合作为一个基类.为了实现这一目的,c++ 11新标准提供了一种防止继承发生的方法,即在类名后跟一个关键字final: ...

  7. NAND的一些相关概念

    chipsize:整个NAND FLASH 的大小,单位为MB pagesize:一页的大小,单位为字节Byte erasesize:最小擦除大小,单位为字节Byte   NAND写操作基本单位是页, ...

  8. java集合类（二）List学习

    接上篇  java集合类(一) List接口继承了Collection接口和Iterable接口,即同样含有Collection和 Iterable的特性,还有方法,其基本方法有: 1)有关添加: b ...

  9. android编程常见问题-程序在模拟器中不显示

    新手编程常见问题: 问题表现:程序运行成功,但是在模拟器中不显示 解决办法:检查项目版本和模拟器版本是否匹配或兼容,如果不匹配,选择和模拟器版本一致 项目版本:右键-Properties-androi ...

  10. 【转载】Hadoop历史服务器详解

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:过往记忆(http://www.iteblog.com/)     原文地址: ...