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

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

让我们来看一下Canvas内置的简单几何图形

—

矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然，我们也可以使用“路径”来描绘包括矩形在内的所有图形。

以下是上述三种方法的API:

1.fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的实心矩形。

2.strokeRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的矩形框。该矩形框会根据当前设置的strokeStyle、lineWidth、lineJoin和miterLimit属性的不同而渲染成不同的样式。

3.clearRect(x,y,width,height)。清除从(x,y)开始，宽度为width，高度为height的矩形区域，使之完全透明。

在调用上述方法绘制Canvas之前，我们需要设定填充和描边的样式。设定这些样式最基本的方法是使用24位色(用16进制字符串表示)。以下是一个简单的例子：

代码如下:

context.fillStyle

=

"#000000"

context.strokeStyle

=

"#ff00ff"

在下面的例子中，填充色设定为黑色，而描边色则设定为紫色：

代码如下:

function

drawScreen()

{

context.fillStyle

=

"#000000"

context.strokeStyle

=

"#ff00ff"

context.lineWidth

=

2

context.fillRect(10,

10,

40,

40)

context.strokeRect(0,

0,

60,

60)

context.clearRect(20,

20,

20,

20)

}

代码执行结果如下图所示：

简单来说：1、微信小程序，在开发的过程，就会应用到HTML5的技术；2、手机和移动端是离不开HTML5的；3、选择用HTML5做手机游戏也是不错的选择；4、互联网的各种应用。

正式说法：1、本地存储；于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度。2、更加简单的实现多媒体，在网页上添加视频和音频；3、实现三维图形和动画；4、更好的运用CSS3，可以做更丰富的渲染效果。

---