24-本地存储 cookie 示例：只弹一次的弹框

定义：让网站服务器把少量数据储存到客户端的硬盘或内存，从客户端的硬盘读取数据的一种技术；

下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>

使用：

1.添加一个"会话cookie"

$.cookie('the_cookie', 'the_value');

里没有指明 cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，所以被称为 “会话cookie（session cookie）”。

2.创建一个cookie并设置有效时间为 7天

$.cookie('the_cookie', 'the_value', { expires: 7 });

这里指明了cookie有效时间，所创建的cookie被称为“持久 cookie （persistent cookie）”。注意单位是：天；

3.创建一个cookie并设置 cookie的有效路径

$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });

在默认情况下，只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie，必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录，可以让所有网页都能互相读取 cookie （一般不要这样设置，防止出现冲突）。

4.读取cookie

$.cookie('the_cookie');

5.删除cookie

$.cookie('the_cookie', null);   //通过传递null作为cookie的值即可

6.可选参数

$.cookie('the_cookie','the_value',{
    expires:7,  
    path:'/',
    domain:'jquery.com',
    secure:true
})

expires：（Number|Date）有效期；设置一个整数时，单位是天；也可以设置一个日期对象作为Cookie的过期日期；
path：（String）创建该Cookie的页面路径；
domain：（String）创建该Cookie的页面域名；
secure：（Booblean）如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS；

本地存储cookie

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

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

下载与引入:jquery.cookie.js基于jquery；先引入jquery，再引入：jquery.cookie.js；下载：http://plugins.jquery.com/cookie/

jquery设置cookie：
//键名：'mycookie'，键值：123，expires：过期时间7天
$.cookie('mycookie','123',{expires:7,path:'/'});

jquery获取cookie：
$.cookie('mycookie');

cookie设置、获取：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script>
        //设置cookie，过期7天，存在网站根目录下
        $.cookie('mycookie','123ok',{expires:7,path:'/'})
        
        //读取cookie
        var mycookie = $.cookie('mycookie')
        alert(mycookie)
    </script>
</head>
<body>
    <h1>测试页面</h1>
</body>
</html>

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

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

//获取
localStorage.getItem('dat');
localStorage.dat

//删除
localStorage.removeItem('dat')

3、sessionStorage 存储在本地，h5新增，容量为5m或更大，不会在请求时携带传递，在同源(同一个域)的当前窗口关闭前有效。

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // localStorage.setItem('dat','456');
        localStorage.dat = '456';

        sessionStorage.setItem('dat1',789)
    </script>
</head>
<body>
    <h1>web Storage不同于cookie，它不依赖于jquery,它上html5新增的</h1>
</body>
</html>

只弹一次的弹框，第一次打开网页弹出，关闭后存cookie后，不再弹出，cookie过期后再弹：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script>
       $(function(){
        var hasread = $.cookie('hasread');

        //判断是否存了cookie，没有就弹出弹框
        if(hasread==undefined)
        {   
            $('.pop_con').show()
  
        }

        //用户点关闭弹框时，存cookie，关闭弹框
        $("#know").click(function(){
            $.cookie('hasread','read',{expires:7,path:'/'});
            $('.pop_con').hide()
        })



       })

    </script>
    <style>

        .pop_con{display:none;}
        .pop{
            position: fixed;
            width:500px;
            height:300px;
            background-color:#fff;
            border:3px solid #000;
            left:50%;
            top:50%;
            margin-left: -250px;
            margin-top:-150px;
            z-index:999;
        }

        .mask{
            position:fixed;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background-color:#000;
            opacity:0.3;
            /*兼容ie*/
            filter:alpha(opacity=30);
            z-index: 998;
        }

        .close{
            /*float: right;*/
            position: absolute;
            right:0;
            top:0;
        }
    </style>
</head>
<body>

    <div class="pop_con">
        <div class="pop">
            亲！本网站最近有优惠活动！请强力关注！
            <a href="#" id="close" class="close">关闭</a>
            <a href="javascript:;" id="know" >朕知道了！</a>
        </div>
        <div class="mask"></div>
    </div>
    <h1>网站的内容</h1>
</body>
</html>

posted @ 2019-04-08 22:20 greenfan 阅读(440) 评论(0) 收藏举报

刷新页面返回顶部

greenfan

24-本地存储 cookie 示例：只弹一次的弹框

公告