html5本地存储怎么做,html5本地存储实例详解

html-css011

html5本地存储怎么做,html5本地存储实例详解,第1张

html5本地存储实例详解之创建

1

首先我们新建一个html5的空白文档,小编这里演示用的是Dreamweaver CS6,当然其他文本编辑器也可以。

2

保存之后开始构建html,我们这里示例用一个文本框两个按钮和一个显示数据的div,如下图:

3

之后写js事件,当点击“保存”的时候,把文本框的内容保存到sessionStorage中,当点击“显示”的时候,把保存的数据从sessionStorage中读取出来显示在页面上。

4

完整代码如下,我们可以在浏览器预览,然后点击试试效果,可以发现能够存储和显示。

5

按F12打开控制台,找到sessionStorage,会发现其是用键值对的方式存储数据的。

6

localStorage跟sessionStorage类似,只是localStorage只要不删除就会永久存储在电脑上,而sessionStorage只要关闭了页面就没有了,这里小编就不再演示了。

END

html5本地存储实例详解之删除

html5本地存储的删除其实也很简单,也是打开控制台找到相应的存储信息,在上面右击删除即可。

点击删除之后需要刷新一次页面就会看到本地存储的数据已经删除了。

3

如果用代码的话,就是.removeItem(key)这个了。

<aside>标签是HTML5中的新标签,用于以较短的方式描述网页的主要对象;它基本上标识了与网页主要内容相关的内容,但不构成主页的主要意图。该<aside>标签主要包含作者信息、链接、相关内容等。

<aside>和<div>这两个标签具有相同的行为和不同的含义。

● <div>:它在网页中定义或创建分区或部分。

● <aside>: 它通过创建部分或部门来完成同样的工作,但它只包含与主网页相关的内容。

<aside>标签使页面设计变得容易,并增强了HTML文档的清晰度;它使我们能够很容易地识别主文本和次文本。无论是<div>还是<aside>都需要CSS来进行特定的设计。<aside>标签支持HTML中的全局属性和事件属性。

语法:

示例1:

效果图:

示例2:

效果图:

浏览器支持

支持<aside>标签的浏览器

● Google chrome 6.0 及更高版本

● Internet Explorer 9.0 及更高版本

● Mozilla 4.0 及更高版本

● Safari 5.0 及更高版本

● Opera 11.1 及更高版本

更多 web开发 、 web前端课程 的相关知识,请查阅 HTML中文网 !!

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等,如果直接通过JavaScript进行绘制可能需数十行或上百行的代码。但是如果我们直接通过Canvas直接创建一个背景图。我们只需要在其他的软件如PS上绘制好一个背景图,然后加载到Canvas上就可以了。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>绘制图表</title>

</head>

<body>

<div id="result-stub" class="well hidden">

<canvas id="canvas" width="345" height="345">

<p>你的浏览器不支持canvas元素</p>

</canvas>

</div>

<script>

//   1、要绘制图表首先我们要获取到canvas对象以及具有图表背景的图片对象。

var

canvas = document.getElementById('canvas'),

context = null

context = canvas.getContext('2d')

var img = new Image()

img.src ='chart-background.png'//这里是一张具有图表背景的图片

//    2、绘制一个具有图表背景的图片后再根据要绘制的曲线图各个点在canvas是中的坐标绘制直线。

img.onload = function() {

//绘制图片

context.drawImage(img, 0, 0)

//绘制直线

context.beginPath()

context.moveTo(70, 105)

context.lineTo(105, 132)

context.lineTo(142, 250)

context.lineTo(176, 175)

context.lineTo(212, 145)

context.lineTo(245, 197)

context.lineTo(280, 90)

context.stroke()

}

</script>

<script src="jquery.js"></script>

</body>

</html>

3、本示例的最终绘制效果如下:这样一个曲线图表就绘制出来的,其他的图表也可以用类似的方法进行绘制。

这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学,该网站上有关于HTML5新特性的讲解。