欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端之本地存储和jqueryUI

程序员文章站 2022-03-22 12:53:10
前端之本地存储和jqueryUI,内容包括 本地存储cookie,localStorage和sessionStorage,cookie练习-只弹一次的弹框示例;拖拽滑动条设置数值示例,网页自定义页面滚动条示例等。 ......

本地存储

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

注意,只有cookie需要使用cookie插件,webstorage不需要使用;


设置cookie插件:jquery.cookie.js

/*!
 * jquery cookie plugin v1.4.1
 * https://github.com/carhartl/jquery-cookie
 *
 * copyright 2013 klaus hartl
 * released under the mit license
 */
(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // amd
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // commonjs
        factory(require('jquery'));
    } else {
        // browser globals
        factory(jquery);
    }
}(function ($) {

    var pluses = /\+/g;

    function encode(s) {
        return config.raw ? s : encodeuricomponent(s);
    }

    function decode(s) {
        return config.raw ? s : decodeuricomponent(s);
    }

    function stringifycookievalue(value) {
        return encode(config.json ? json.stringify(value) : string(value));
    }

    function parsecookievalue(s) {
        if (s.indexof('"') === 0) {
            // this is a quoted cookie as according to rfc2068, unescape...
            s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
        }

        try {
            // replace server-side written pluses with spaces.
            // if we can't decode the cookie, ignore it, it's unusable.
            // if we can't parse the cookie, ignore it, it's unusable.
            s = decodeuricomponent(s.replace(pluses, ' '));
            return config.json ? json.parse(s) : s;
        } catch (e) {
        }
    }

    function read(s, converter) {
        var value = config.raw ? s : parsecookievalue(s);
        return $.isfunction(converter) ? converter(value) : value;
    }

    var config = $.cookie = function (key, value, options) {

        // write

        if (value !== undefined && !$.isfunction(value)) {
            options = $.extend({}, config.defaults, options);

            if (typeof options.expires === 'number') {
                var days = options.expires, t = options.expires = new date();
                t.settime(+t + days * 864e+5);
            }

            return (document.cookie = [
                encode(key), '=', stringifycookievalue(value),
                options.expires ? '; expires=' + options.expires.toutcstring() : '', // use expires attribute, max-age is not supported by ie
                options.path ? '; path=' + options.path : '',
                options.domain ? '; domain=' + options.domain : '',
                options.secure ? '; secure' : ''
            ].join(''));
        }

        // read

        var result = key ? undefined : {};

        // to prevent the for loop in the first place assign an empty array
        // in case there are no cookies at all. also prevents odd result when
        // calling $.cookie().
        var cookies = document.cookie ? document.cookie.split('; ') : [];

        for (var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decode(parts.shift());
            var cookie = parts.join('=');

            if (key && key === name) {
                // if second argument (value) is a function it's a converter...
                result = read(cookie, value);
                break;
            }

            // prevent storing a cookie that we couldn't decode.
            if (!key && (cookie = read(cookie)) !== undefined) {
                result[name] = cookie;
            }
        }

        return result;
    };

    config.defaults = {};

    $.removecookie = function (key, options) {
        if ($.cookie(key) === undefined) {
            return false;
        }

        // must not alter options, thus extending a fresh object...
        $.cookie(key, '', $.extend({}, options, {expires: -1}));
        return !$.cookie(key);
    };

}));

 

cookie简单使用示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">

        // 设置cookie 过期时间为7天,存在网站根目录下
        //$.cookie('mycookie','ok!',{expires:7,path:'/'});

        //读取cookie
        var mycookie = $.cookie('mycookie');
        alert(mycookie);
    </script>
</head>
<body>
    <h1>测试页面</h1>
</body>
</html>

webstorage的使用示例-localstorage/sessionstorage 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript">

        //localstorage.setitem("dat", "456");

        //sessionstorage.setitem('dat1','789');

    </script>
</head>
<body>
<h1>测试webstorage</h1>
</body>
</html>

cookie练习-只弹一次的弹框

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function () {
            var hasread = $.cookie('hasread');
            //alert(hasread);

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

            //用户点击知道后,存cookie,把弹框关掉
            $('#user_read').click(function () {
                $.cookie('hasread', 'read', {expires: 7, path: '/'});
                $('.pop_con').hide();
            })
        })
    </script>
    <script type="text/javascript"></script>
    <style type="text/css">

        .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: 9999;
        }

        .mask {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.3;
            filter: alpha(opacity=30);
            left: 0;
            top: 0;
            z-index: 9990;

        }

        .close {
            float: right;
            font-size: 30px;
        }
    </style>
</head>
<body>

<div class="pop_con">
    <div class="pop">
        亲!本网站最近有优惠活动!请强力关注!
        <a href="#" id="close" class="close">×</a>

        <a href="javascript:;" id="user_read">朕知道了!</a>
    </div>
    <div class="mask"></div>
</div>

<h1>网站内容</h1>
</body>
</html>

 

 

jqueryui

jquery ui是以 jquery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jqueryui 网址
http://jqueryui.com/

常用jqueryui插件:

draggable
1、设置数值的滑动条
2、自定义滚动条

 

拖拽滑动条设置数值示例(类似于游戏中中设置灵敏度的设置条)

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>drag</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.dragbar').draggable({
                axis: 'x',

                containment: 'parent',
                //containment:[0,0,600,0]

                //设置拖动时候的透明度
                opacity: 0.6,

                drag: function (ev, ui) {
                    //console.log(ui.position.left);

                    //获取拖动的距离                    
                    var nowleft = ui.position.left;
                    $('.progress').css({width: nowleft});
                    $('.slide_count').val(parseint(nowleft * 100 / 570));
                }
            });
        })
    </script>
    <style type="text/css">
        .slidebar_con {
            width: 650px;
            height: 32px;
            margin: 50px auto 0;
        }

        .slidebar {
            width: 600px;
            height: 30px;
            border: 1px solid #ccc;
            float: left;
            position: relative;
        }

        .slidebar .dragbar {
            width: 30px;
            height: 30px;
            background-color: gold;
            cursor: pointer;
            position: absolute;
            left: 0;
            top: 0;
        }

        .slidebar .progress {
            width: 0px;
            height: 30px;
            background-color: #f0f0f0;
            position: absolute;
            left: 0;
            top: 0;
        }

        .slide_count {
            padding: 0;
            float: right;
            width: 40px;
            height: 30px;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 16px;
        }

    </style>
</head>
<body>
<div class="slidebar_con">
    <div class="slidebar">
        <div class="progress"></div>
        <div class="dragbar"></div>
    </div>
    <input type="text" name="" value="0" class="slide_count">
</div>
</body>
</html>

网页自定义页面滚动条示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>自定义滚动条</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var h = $('.paragraph').outerheight();

            //整体文本的高度减去外面容器的高度
            var hide = h - 500;

            $('.scroll_bar').draggable({
                axis: 'y',
                containment: 'parent',
                opacity: 0.6,
                drag: function (ev, ui) {
                    var nowtop = ui.position.top;
                    var nowscroll = parseint(nowtop / 290 * hide);
                    $('.paragraph').css({top: -nowscroll});
                }
            });
        })
    </script>
    <style type="text/css">
        .scroll_con {
            width: 400px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 50px auto 0;
            position: relative;
            overflow: hidden;
        }

        .paragraph {
            width: 360px;
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px 20px;
            font-size: 14px;
            font-family: 'microsoft yahei';
            line-height: 32px;
            text-indent: 2em;
        }

        .scroll_bar_con {
            width: 10px;
            height: 490px;
            position: absolute;
            right: 5px;
            top: 5px;
        }

        .scroll_bar {
            width: 10px;
            height: 200px;
            background-color: #ccc;
            position: absolute;
            left: 0;
            top: 0;
            cursor: pointer;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="scroll_con">
    <div class="paragraph">
        2005年以后,互联网进入web2.0时代,各种类似桌面软件的web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。以前会photoshop和dreamweaver就可以制作网页,现在只掌握这些已经远远不够了。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫web前端开发。web前端开发在产品开发环节中的作用变得越来越重要,而且需要专业的前端工程师才能做好,这方面的专业人才近几年来备受青睐。web前端开发是一项很特殊的工作,涵盖的知识面非常广,既有具体的技术,又有抽象的理念。简单地说,它的主要职能就是把网站的界面更好地呈现给用户。
        掌握html是网页的核心,是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。因此,它是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言,学好html是成为web开发人员的基本条件。
        学好css是网页外观的重要一点,css可以帮助把网页外观做得更加美观。
        学习javascript的基本语法,以及如何使用javascript编程将会提高开发人员的个人技能。
        了解unix和linux的基本知识虽然这两点很基础,但是开发人员了解unix和linux的基本知识是有益无害的。
        了解web服务器当你对apache的基本配置,htaccess配置技巧有一些掌握的话,将来必定受益,而且这方面的知识学起来也相对容易。
    </div>
    <div class="scroll_bar_con">
        <div class="scroll_bar">
        </div>
    </div>
</div>
</body>
</html>