<!
DOCTYPE html
>
<
html
lang
=
"en"
>
<
head
>
<
title
>
web 留言本
</
title
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1"
>
</
head
>
<
body
>
<
p
>
简单web 留言本
</
p
>
<
textarea
id
=
"memo"
cols
=
"60"
rows
=
"10"
></
textarea
><
br
/>
<
input
type
=
"button"
value
=
"追加"
onclick
=
"saveStorage('memo')"
/>
<
input
type
=
"button"
value
=
"初始化"
onclick
=
"clearStorage('msg')"
/>
<
hr
/
>
<
p
id
=
"msg"
></
p
>
<
script
>
function
saveStorage
(
id
) {
// 获取输入的值
var
data
=
document
.
getElementById
(id).
value
;
// 获取当前时间
var
time
=
new
Date
().
getTime
();
// 保存当前数据
localStorage
.
setItem
(time, data);
alert
(
"数据已保存"
);
// 调用函数,生成表格
loadStorage
(
'msg'
);
}
function
loadStorage
(
id
) {
var
result
=
'<table border="1">'
;
// 循环输出存储的内容
for
(
var
i
=
0
; i
<
localStorage
.
length
; i
++
) {
var
key
=
localStorage
.
key
(i);
// 获取存储的内容
var
value
=
localStorage
.
getItem
(key);
var
date
=
new
Date
();
date
.
setTime
(key);
var
datestr
=
date
.
toGMTString
();
result
+=
'<tr><td>'
+
value
+
'</td><td>'
+
datestr
+
'</td></tr>'
;
}
result
+=
'</table>'
;
var
target
=
document
.
getElementById
(id);
target
.
innerHTML
=
result;
}
function
clearStorage
() {
localStorage
.
clear
();
alert
(
"全部数据清除"
);
loadStorage
(
'msg'
);
}
<
/
script
>
</
body
>
</
html
>