jquery--本地存储cookie 、localStorage、sessionStorage/实例pop-once

本地存储分为cookie，以及新增的localStorage和sessionStorage

1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。

jquery 设置cookie
$.cookie('mycookie','123',{expires:7,path:'/'});
jquery 获取cookie
$.cookie('mycookie');

2、localStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在所有同源窗口中共享，数据一直有效，除非人为删除，可作为长期数据。

//设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

3、sessionStorage 存储在本地，容量为5M或者更大，不会在请求时候携带传递，在同源的当前窗口关闭前有效。

localStorage 和 sessionStorage 合称为Web Storage , Web Storage支持事件通知机制，可以将数据更新的通知监听者，Web Storage的api接口使用更方便。

iPhone的无痕浏览不支持Web Storage，只能用cookie。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>cookie</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/jquery.cookie.js"></script>        <!--需引入该库-->
12     <script type="text/javascript"> 
13 
14         //写cookie
15         $.cookie('mycookie','ok!',{expires:7,path:'/'})
16 
17         //读cookie
18         var val=$.cookie('mycookie')
19         alert(val)
20     </script>
21 
22 </head>
23 <body>
24 
25 </body>
26 </html>

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>cookie例子 pop-once</title>
 6     <style type="text/css">
 7         body{
 8             margin:0;
 9         }
10 
11         .pop{
12             width:400px;
13             height:300px;
14             background-color:#fff;
15             border:1px solid #ccc;
16             position:fixed;
17             left:50%;
18             top:50%;
19             margin-left:-200px;
20             margin-top:-250px;
21             z-index:9999;
22             opacity:0;
23             filter:alpha(opacity=0);
24 
25         }
26 
27         .pop span{
28             float:right;
29             font-size:30px;
30             cursor:pointer;
31         }
32 
33         .mask{
34             width:100%;
35             height: 100%;
36             background-color:#000;
37             opacity:0.6;
38             filter:alpha(opacity=60);
39             position:fixed;
40             z-index:9990;
41             left:0;
42             top:0
43         }
44         .pop_con{
45             display:none;
46         }
47 
48         .hasknow{
49             text-align:center;
50             cursor:pointer;
51             margin-top:100px;
52         }
53     </style>
54 
55     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
56     <script type="text/javascript" src="../js/jquery.cookie.js"></script>
57     <script type="text/javascript">
58         $(function(){
59             var read=$.cookie('hasread');
60             //alert(read);
61 
62             //判断cookie值是否存在
63             if(read==undefined){
64                 $('.pop_con').show();
65                 $('.pop').animate({marginTop:-150,opacity:1});
66             }
67             $('.hasknow').click(function(){
68                 $.cookie('hasread','ok!',{expires:7,path:'/'});
69                 $('.pop_con').hide();
70             })
71 
72         })
73 
74     </script>
75 </head>
76 <body>
77 
78     <div class="pop_con">
79         <div class="pop">
80             <span>×</span>
81             <p>我们网站有优惠，赶紧行动吧！亲！</p>
82             <p class="hasknow">我知道了</p>
83         </div>
84         <div class="mask"></div>
85     </div>
86 
87     <h1>网站首页</h1>
88 </body>
89 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>localStorage/sessionStorage本地存储</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/jquery.cookie.js"></script>
12     <script type="text/javascript">
13         //写入
14         //localStorage.setItem('mystorage','ok!');
15 
16         sessionStorage.setItem('pwd','123')
17 
18         // 读取
19         alert(localStorage.mystorage)
20         alert(sessionStorage.pwd)
21 
22     </script>
23 </head>
24 <body>
25 
26 </body>
27 </html>

posted on 2019-12-30 23:37  cherry_ning  阅读(382)  评论(0)    收藏  举报

导航