前端之本地存儲和jqueryUI

本地存儲

本地存儲分為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>