html5本地存储

giga_Zhang

浏览: 155270 次
性别:
来自: 上海

最近访客更多访客>>

luhongcun

ngxk2012

xk0534

zhaoxunyong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

直接上例子,自己体会：

<html>
<head>
<title>HTML5 contenteditable example</title>

<style type="text/css">
#scribble-pad {
       margin-left:auto;
       margin-right:auto;
       height: 475px;
       width: 475px;
       background-image:url(https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg);
       background-repeat: no-repeat;
}

#scribble {
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
      max-width: 300px;
      padding: 120px 100px 100px 75px;
      color: #486891;
      font-family: Arial,sans-serif;
      font-size: 140%;
      font-style: italic;
      font-weight:bold;
      line-height: 1.5em;
}

.c-link {
      color: #486891;
      font-family: Arial,sans-serif;
      font-size: 95%;
      font-weight:bold;
      text-decoration: none;
}
</style>

<script type="text/javascript">
function storeUserScribble(id) {
var scribble = document.getElementById('scribble').innerHTML;
localStorage.setItem('userScribble',scribble);
}

function getUserScribble() {
if ( localStorage.getItem('userScribble')) {
    var scribble = localStorage.getItem('userScribble');
}
else {
    var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
}
document.getElementById('scribble').innerHTML = scribble;
}

function clearLocal() {
clear: localStorage.clear();
return false;
}
</script>

</head>
<body>

<a class="c-link" href='' onclick='javascript:clearLocal();'>Clear local storage</a>

<div id="scribble-pad"><pre id="scribble" contenteditable="true" onkeyup="storeUserScribble(this.id);"></pre></div>

<script>
getUserScribble();
</script>

</body>
</html>

0
顶

0
踩

分享到：

autocomplete | CronTrigger Tutorial

2011-12-28 10:43
浏览 846
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论