1.Html5  Web储存

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

（1）localStorage 对象

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

  1. <body>
  2. <div id="result"></div>
  1. <script>
  2. if(typeof(Storage)!=="undefined")
  3. {
  4.   localStorage.sitename="我就是存的值";
  5.   document.getElementById("result").innerHTML=localStorage.sitename;
  6. }
  7. else
  8. {
  9.   document.getElementById("result").innerHTML="浏览器不支持web存储。";
  10. }
  11. </script>
  1. </body>

移除 localStorage 中的 "lastname" ：

  1. localStorage.removeItem("lastname");

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

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

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

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

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

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

localStorage 应用：获取点击次数

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"> 
  5. <title></title> 
  6. <script>
  1. function clickCounter()
  2. {
  3.     if(typeof(Storage)!=="undefined")
  4.     {
  5.         if (localStorage.clickcount)
  6.         {
  7.             localStorage.clickcount=Number(localStorage.clickcount)+1;
  8.         }
  9.         else
  10.         {
  11.             localStorage.clickcount=1;
  12.         }
  13.         document.getElementById("result").innerHTML=" 你已经点击了按钮 " + localStorage.clickcount + " 次 ";
  14.     }
  15.     else
  16.     {
  17.         document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
  18.     }
  19. }
  20. </script>
  1. </head>
  2. <body>
  3. <p><button onclick="clickCounter()" type="button">点我试试！</button></p>
  4. <div id="result"></div>
  5. <p>点击该按钮查看计数器的增加。</p>
  6. <p>关闭浏览器选项卡(或窗口),重新打开此页面,计数器将继续计数(不是重置)。</p>
  7. </body>
  8. </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. 蜗牛慢慢爬 LeetCode 8. String to Integer (atoi) [Difficulty: Medium]

    题目 Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input cas ...

  2. 第七次java作业

     interface Pet{public String getName();public String getColor();public int getAge();}class Cat imple ...

  3. CCF——数位之和201512-1

    问题描述 给定一个十进制整数n,输出n的各位数字之和. 输入格式 输入一个整数n. 输出格式 输出一个整数,表示答案. 样例输入 20151220 样例输出 13 样例说明 20151220的各位数字 ...

  4. CodeForces Round #527 (Div3) B. Teams Forming

    http://codeforces.com/contest/1092/problem/B There are nn students in a university. The number of st ...

  5. php opensll加解密类

    <?php $pri = "-----BEGIN RSA PRIVATE KEY----- MIICXQIBAAKBgQCzJc4RrAqaH2Es02XQ91Cqp/JK0yX893 ...

  6. 利用vs10和opencv识别图片类型身份证的号码

    遇到的问题: 1 持续灰色图像框 waitkey()要在imshow()之前调用. 2 CvRect 和Rect CvXXX是C语言的接口,cv::XXX是C++语言的接口.两者混在一起容易出错 3 ...

  7. virtio 之后的数据直连

    在上一篇中说了virtio这种半虚拟化方案之后,还有一种全虚拟化的方案,这种全虚拟化的方案中,直接宿主机上的设备,直接被虚拟化成了n个设备,然后这些设备可以直接被加载进guest os中当做一个普通的 ...

  8. [LeetCode] MaximumDepth of Binary Tree

    Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...

  9. SPOJ3899——Finding Fractions

    SPOJ上的每个题目都做得我泪牛满面. 这个题目也是的.题目意思是给你两个分数a/b和c/d,要你求出一个分数p/q,使得a/b<p/q<c/d,且p最小. 看完题目后半天都没有任何思路哦 ...

  10. 《Linux Shell 脚本攻略》读书笔记

    本书主要讲解一些linux shell命令的用法,讲解一些shell的奇技淫巧. 第一章 小试牛刀 主要介绍一些基本shell指令 终端打印:echo.printf 别名:alias 终端处理工具:t ...