HTML5 - code example of ContentEditable and LocalStorage - create a web sticky note!(用HTML5创建一个网页便利贴)
http://www.daqianduan.com/html5-web-post-it/
在这篇文章里我将研究HTML5上2个新的功能：contenteditable 和 localStorage。当我看了HTML5、W3C规范说明后，我迫不及待的要在这同一个程序上写出例子来演示这些新功能。
View Code
1 <html>
2 <head>
3 <title>HTML5 contenteditable example</title>
4
5 <style type="text/css">
6 #scribble-pad {
7 margin-left:auto;
8 margin-right:auto;
9 height: 475px;
10 width: 475px;
11 background-image:url(https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg);
12 background-repeat: no-repeat;
13 }
14
15 #scribble {
16 height: 300px;
17 width: 300px;
18 padding: 120px 100px 100px 75px;
19 color: #486891;
20 font-family: Arial,sans-serif;
21 font-size: 140%;
22 font-style: italic;
23 font-weight:bold;
24 line-height: 1.5em;
25 }
26
27 #c-link {
28 color: #486891;
29 font-family: Arial,sans-serif;
30 font-size: 95%;
31 font-weight:bold;
32 text-decoration: none;
33 }
34 </style>
35
36
37
38 <script>
39 function storeUserScribble(id) {
40 var scribble = document.getElementById('scribble').innerHTML;
41 localStorage.setItem('userScribble',scribble);
42 }
43
44 function getUserScribble() {
45 if ( localStorage.getItem('userScribble')) {
46 var scribble = localStorage.getItem('userScribble');
47 }
48 else {
49 var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
50 }
51 document.getElementById('scribble').innerHTML = scribble;
52 }
53
54 function clearLocal() {
55 clear: localStorage.clear();
56 return false;
57 }
58 </script>
59
60 </head>
61 <body>
62
63 <a id="c-link" href='' onclick='clearLocal();'>Clear local storage</a>
64
65 <div id="scribble-pad">
66 <div id="scribble" contenteditable="true" onkeyup=storeUserScribble(this.id)>
67 </div>
68 </div>
69
70
71 <script>
72 getUserScribble();
73 </script>
74
75 </body>
76 </html>
