localStorage实现简单web 留言本

<! 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 >