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

html-css04

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)这个了。

图表的背景一般是精心设计的它有一定的梯度、网格线、号码标签和月份名称等等，如果直接通过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新特性的讲解。