1.Html5  Web储存

概念：使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

（1）localStorage 对象

　　localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

<body>

<div id="result"></div>
<script>

if(typeof(Storage)!=="undefined")

{

  localStorage.sitename="我就是存的值";

  document.getElementById("result").innerHTML=localStorage.sitename;

}

else

{

  document.getElementById("result").innerHTML="浏览器不支持web存储。";

}

</script>
</body>

移除 localStorage 中的 "lastname" ：

localStorage.removeItem("lastname");

不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

保存数据：localStorage.setItem(key,value);

读取数据：localStorage.getItem(key);

删除单个数据：localStorage.removeItem(key);

删除所有数据：localStorage.clear();

得到某个索引的key：localStorage.key(index);

localStorage 应用：获取点击次数

下面的实例展示了用户点击按钮的次数。代码中的字符串值转换为数字类型:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title></title> 

<script>
function clickCounter()

{

    if(typeof(Storage)!=="undefined")

    {

        if (localStorage.clickcount)

        {

            localStorage.clickcount=Number(localStorage.clickcount)+1;

        }

        else

        {

            localStorage.clickcount=1;

        }

        document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";

    }

    else

    {

        document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";

    }

}

</script>
</head>

<body>

<p><button onclick="clickCounter()" type="button">点我试试！</button></p>

<div id="result"></div>

<p>点击该按钮查看计数器的增加。</p>

<p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>

</body>

</html>

Html5学习4的更多相关文章

  1. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  2. HTML5学习总结——canvas绘制象棋(canvas绘图)

    一.HTML5学习总结——canvas绘制象棋 1.第一次:canvas绘制象棋(笨方法)示例代码: <!DOCTYPE html> <html> <head> & ...

  3. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  4. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  5. [HTML5] 飞龙天惊-HTML5学习系列

    飞龙天惊 cnblog URL:http://www.cnblogs.com/fly_dragon/ Html5 学习系列(一)认识HTML5 http://www.cnblogs.com/fly_d ...

  6. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  7. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  8. HTML5学习参考资料整理

    给大家推荐一下学习研究HTML5必备的一些个网站,更加有利于大家对HTML5的学些和研究.如果各位童鞋还有更多的,欢迎投递资源给我们,也可以支持 我们,让我们利用大家的力量收集更多的HTML5学习资料 ...

  9. HTML5学习总结——HTML5入门与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 概念: HTML5 是继 HTML4.01, XHTML 1.0 和 DOM 2 HTML 后的又一个重要版本, 旨在消除富 Internet 程序( ...

  10. html和html5学习

    html和html5学习 chorme.safari中的input或textarea html超链接(a)详细讲解 html5新增及删除标签 html表格 图片加alt属性 input的type属性 ...

随机推荐

  1. DB2定位锁等待

    在应用中,我们经常会碰到sql执行很慢,但是数据库cpu和内存使用率又不高的情况,类似的问题基本上由于锁,排序等原因造成,本文主要描述如何去定位锁等待问题,谁在锁等待?等待谁持有的锁?锁在那个表? 一 ...

  2. 使用.bat文件运行ant的build.xml

    1.新建一个txt文件 2.复制下面命令到txt文件 echo "Start build..." call ant.bat -f "E:\build.xml" ...

  3. Maven编译打包出错：找不到符号

    项目中,使用的是maven管理,但是有几个jar不是通过maven引入的,是通过IDEA导入的,在使用maven插件编译的时候,会出现如下的一些错误: 解决方法: 在项目中创建一个目录lib,然后将j ...

  4. 使用ASP.NET Identity 实现WebAPI接口的Oauth身份验证

    使用ASP.NET Identity 实现WebAPI接口的Oauth身份验证   目前WEB 前后端分离的开发模式比较流行,之前做过的几个小项目也都是前后分离的模式,后端使用asp.net weba ...

  5. UVA11653_Buses

    这个题目很有意思,一不小心就会让人坑在里面. 题意是这样的,给你n,k,l.分别表示总共的长度,长度为5和10的车的不同颜色数量现在问你要把n的填满有多少种方案. 很多人一开始都会脑子一根筋地想用排列 ...

  6. 对Spark2.2.0文档的学习2-Job Scheduling

    Job Scheduling Link:http://spark.apache.org/docs/2.2.0/job-scheduling.html 概况: (1)集群中多个应用的调度主要考虑的是不同 ...

  7. Eclipse中使用git提交代码，报错Testng 运行Cannot find class in classpath的解决方案

    一.查找原因方式 1.点击Project——>Clear...——>Build Automatically 2.查看问题 二.报错因素 1.提交.xlsx文件 2.提交时,.xlsx文件被 ...

  8. 批量后台执行fio性能测试脚本

    安装ansible工具: )直接yum install -y ansible; )然后更改配置,/etc/ansible/ansible.cfg,将里面的host_key_checking = Fal ...

  9. C++解析(9)：关于const和引用的疑问

    0.目录 1.关于const的疑问 2.关于引用的疑问 2.1 引用与指针 2.2 从C++语言与C++编译器角度看引用 2.3 从工程项目开发看引用 3.小结 1.关于const的疑问 const什 ...

  10. Qt 多线程同步与通信

    Qt 多线程同步与通信 1 多线程同步 Qt提供了以下几个类来完成这一点:QMutex.QMutexLocker.QSemphore.QWaitCondition. 当然可能还包含QReadWrite ...