本地存储分为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>