Canvas与localStorage简单应用,1个施用HTML五

作者: 韦德国际1946国际网址  发布:2019-05-28

昨日在网络看到二个归纳的todo应用,使用angularJs做前端数据绑定,利用localStorage来存款和储蓄数据,感觉挺有意思的。

Canvas 是HTML5的第一次全国代表大会2d图形管理利器,localStorage是地面存款和储蓄,它有一个很有意思的API,类似于观看者模型的风云storage事件,一者本地存款和储蓄发生变动,它会响应注册了storage事件的具备窗口。 那样当大家在内部3个窗口的Canvas中画东西是,其余窗口能够监听比量齐观绘,那就是底下的那个例子。

HTML五地点存款和储蓄应用sessionStorage和localStorage,

Canvas与localStorage简单应用,1个施用HTML五。在html伍从前,浏览器要兑现数量的积累,一般都以用cookie,不过cookie有域名和大小限定. 

html5风行之后,能够经过localStorage和sessionStorage完结浏览器端的数量存款和储蓄,那两者有哪些特色呢?

sessionStorage
韦德国际1946国际网址,  sessionStorage属于偶然会话,数据存储的有效期为:从页面展开到页面关闭的时光段,属于窗口的不时存款和储蓄,页面关闭,本地存款和储蓄消失

localStorage

  • 千古存款和储蓄(能够手动删除数据)
  • 积攒量限制 ( 5M )
  • 客户端完毕,不会呈请服务器管理
  • sessionStorage数据在页面之间不能够共享、 而localStorage能够兑现页面之间共享

sessionStorage的应用:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         window.onload = function(){
 8             var aInput = document.getElementsByTagName('input');
 9             aInput[0].onclick = function(){
10                 //sessionStorage: 临时存储, 只在当前页面有效,不能传递到其他页面,页面关闭之后消失
11                 window.sessionStorage.setItem("name", aInput[3].value );
12             };
13             aInput[1].onclick = function(){
14                 alert(window.sessionStorage.getItem("name" ));
15             };
16             aInput[2].onclick = function(){
17                 window.sessionStorage.removeItem("name" );
18             };
19         }
20     </script>
21 </head>
22 <body>
23 <input type="button" value="设置" />
24 <input type="button" value="获取" />
25 <input type="button" value="删除" />
26 <br/>
27 <input type="text" />
28 </body>
29 </html>

localStorage的应用

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         window.onload = function(){
 8             var aInput = document.getElementsByTagName('input');
 9             aInput[0].onclick = function(){
10                 //localStorage : 永久性存储
11                 window.localStorage.setItem("name", aInput[3].value);
12                 window.localStorage.setItem("name2", 'aaaaa');
13             };
14             aInput[1].onclick = function(){
15                 alert( window.localStorage.getItem( "name" ) );
16                 alert( window.localStorage.getItem( "name2" ) );
17             };
18             aInput[2].onclick = function(){
19                 window.localStorage.removeItem("name");
20 //                window.localStorage.clear();
21             };
22         }
23     </script>
24 </head>
25 <body>
26 <input type="button" value="设置" />
27 <input type="button" value="获取" />
28 <input type="button" value="删除" />
29 <br/>
30 <input type="text" />
31 </body>
32 </html>

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script>
 7         window.onload = function () {
 8             var aInput = document.getElementsByTagName("input");
 9             var oT = document.querySelector("textarea");
10 
11             if (window.localStorage.getItem("userName")) {
12                 aInput[0].value = window.localStorage.getItem("userName");
13             }
14 
15             for (var i = 0; i < aInput.length; i  ) {
16                 if (window.localStorage.getItem('sex') == aInput[i].value) {
17                     aInput[i].checked = true;
18                 }
19             }
20 
21             if (window.localStorage.getItem("note")) {
22                 oT.value = window.localStorage.getItem("note");
23             }
24 
25             window.onunload = function () {
26                 if (aInput[0].value) {
27                     window.localStorage.setItem("userName", aInput[0].value);
28                 }
29 
30                 for (var i = 0; i < aInput.length; i  ) {
31                     if (aInput[i].checked == true) {
32                         window.localStorage.setItem('sex', aInput[i].value);
33                     }
34                 }
35 
36                 if (oT.value) {
37                     window.localStorage.setItem('note', oT.value);
38                 }
39             }
40         }
41     </script>
42 </head>
43 <body>
44 <p>
45     用户名: <input type="text"/>
46 </p>
47 
48 <p>
49     性别: <br/>
50     <input type="radio" name="sex" value="男"/>男
51     <input type="radio" name="sex" value="女"/>女
52 </p>
53 
54 <p>
55     备注:
56     <textarea cols="30" rows="10"></textarea>
57 </p>
58 
59 </body>
60 </html>

 

在html5从前,浏览器要贯彻数量的储存,一般都以用cookie,不过cookie有域名和尺寸限定. html五流行...

在html5此前,浏览器要贯彻多少的仓库储存,一般都以用cookie,不过cookie有域名和大小限定. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  <html ng-app="todoApp">    <head>  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>  <script src="/js/angular.js" type="text/javascript"></script>  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js" type="text/javascript"></script>  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" type="text/css"/>  <script type="text/javascript" src="/less/js/app.js"></script>  <style>    .center-grey{   background:#f2f2f2;   margin-top:20;    }    .top-buffer {    margin-top:20px;     }    button{    display: block;     width: 100%;    }  </style>  <title>Angular Todo Note App</title>    </head>    <body>  <div class="container center-grey" ng-controller="TodoController">    <div class="row top-buffer" >        <input class="form-control" type="text" ng-model="note" placeholder="Add a note here"/>         <button ng-click="createNote()" class="btn btn-success">Add</button>        </div>    <div class="row top-buffer" >        <ul class="list-group">  <li ng-repeat="note in notes track by $index" class="list-group-item">    {{note}}  </li>    </ul>        </div>  </div>    </body>  </html>

 

html伍风靡之后,能够通过localStorage和sessionStorage达成浏览器端的数额存款和储蓄,那两个有哪些特色呢?

ng-app证明了选用todoApp作为model

开拓四个窗口,然后在其八个窗口画,另3个窗口则能够看到你画的东东 

sessionStorage
  sessionStorage属于临时会话,数据存款和储蓄的有效期为:从页面打开到页面关闭的岁月段,属于窗口的暂且存款和储蓄,页面关闭,本地存款和储蓄消失

ng-controller注明了TodoController作为调节器

 

localStorage

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:Canvas与localStorage简单应用,1个施用HTML五

关键词: html5 本地存储 sessionStora localStorage 韦德国际

上一篇:动用模块化的选用
下一篇:没有了