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. 奇异值分解(SVD) --- 几何意义 （转载）

    PS:一直以来对SVD分解似懂非懂,此文为译文,原文以细致的分析+大量的可视化图形演示了SVD的几何意义.能在有限的篇幅把 这个问题讲解的如此清晰,实属不易.原文举了一个简单的图像处理问题,简单形象, ...

  2. 【第八周】【新蜂】新NABCD

    由小组成员宫成荣撰写 一．小组项目申请时提交的NABCD: 痛点:普通的俄罗斯方块是不现实距离下一级有多远的,我们的游戏能显示距离下一等级游戏有多远.方便玩家体验. nabc: n:能满足大多数玩家的 ...

  3. python3.6 SSL module is not available

    pip is configured with locations that require TLS/SSL, however the ssl module in Python is not avail ...

  4. Linux学习笔记3

    touch filename 创建一个不存在的文件,或者修改文件的时间戳. touch log.txt whereis name 定位一个文件. whereis php.ini whereis.loc ...

  5. DNS原理及解析过程

    本文主要参考自:http://369369.blog.51cto.com/319630/812889 并做了小幅修改 什么是DNS? 因特网上的主机和人类一样,也可以使用多种方式进行识别.主机的一种识 ...

  6. JMeter脚本增强之集合点

    集合点的概念:用于实现所谓并发操作,如果集合点设定是10个人,那么所有的用户就会在同一条起跑线上等着后面的人,等10个人到齐了就哗地一下全部跑出去执行同一个动作.如果设置了超时,那么过了超时时间,有可 ...

  7. Graph-Based image segmentation method

    1.Graph-Based 方法简介 基于图的图像分割方法将图像伪造成带权值无向图的形式 : G = (V, E) 其中,V是顶点集合,把图像中的每个像素或者每个区域看成图的一个顶点:E是边的集合,连 ...

  8. [codeforces696B]Puzzles

    B. Puzzles time limit per test  1 second memory limit per test 256 megabytes input standard input ou ...

  9. 浅谈FFT&NTT

    复数及单位根 复数的定义大概就是:\(i^2=-1\),其中\(i\)就是虚数单位. 那么,在复数意义下,对于方程: \[ x^n=1 \] 就必定有\(n\)个解,这\(n\)个解的分布一定是在复平 ...

  10. servlet中doGet()和doPost()的区别

    1.生成方式 get方法有四种: ①直接在URL地址栏中输入URL ②网页中的超链接 ③form中method为get ④form中method为空时,默认是get提交 post只知道有一种:form ...