经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
前端之本地存储和jqueryUI
来源：cnblogs　　作者：YifChan　　时间：2019/6/17 8:59:59　　对本文有异议

本地存储

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

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

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

 

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

  1. //设置：
  2. localStorage.setItem("dat", "456");
  3. localStorage.dat = '456';
  5. //获取：
  6. localStorage.getItem("dat");
  7. localStorage.dat
  9. //删除
  10. 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

  1. /*!
  2.  * jQuery Cookie Plugin v1.4.1
  3.  * https://github.com/carhartl/jquery-cookie
  4.  *
  5.  * Copyright 2013 Klaus Hartl
  6.  * Released under the MIT license
  7.  */
  8. (function (factory) {
  9.     if (typeof define === 'function' && define.amd) {
  10.         // AMD
  11.         define(['jquery'], factory);
  12.     } else if (typeof exports === 'object') {
  13.         // CommonJS
  14.         factory(require('jquery'));
  15.     } else {
  16.         // Browser globals
  17.         factory(jQuery);
  18.     }
  19. }(function ($) {
  21.     var pluses = /\+/g;
  23.     function encode(s) {
  24.         return config.raw ? s : encodeURIComponent(s);
  25.     }
  27.     function decode(s) {
  28.         return config.raw ? s : decodeURIComponent(s);
  29.     }
  31.     function stringifyCookieValue(value) {
  32.         return encode(config.json ? JSON.stringify(value) : String(value));
  33.     }
  35.     function parseCookieValue(s) {
  36.         if (s.indexOf('"') === 0) {
  37.             // This is a quoted cookie as according to RFC2068, unescape...
  38.             s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
  39.         }
  41.         try {
  42.             // Replace server-side written pluses with spaces.
  43.             // If we can't decode the cookie, ignore it, it's unusable.
  44.             // If we can't parse the cookie, ignore it, it's unusable.
  45.             s = decodeURIComponent(s.replace(pluses, ' '));
  46.             return config.json ? JSON.parse(s) : s;
  47.         } catch (e) {
  48.         }
  49.     }
  51.     function read(s, converter) {
  52.         var value = config.raw ? s : parseCookieValue(s);
  53.         return $.isFunction(converter) ? converter(value) : value;
  54.     }
  56.     var config = $.cookie = function (key, value, options) {
  58.         // Write
  59.  
  60.         if (value !== undefined && !$.isFunction(value)) {
  61.             options = $.extend({}, config.defaults, options);
  63.             if (typeof options.expires === 'number') {
  64.                 var days = options.expires, t = options.expires = new Date();
  65.                 t.setTime(+t + days * 864e+5);
  66.             }
  68.             return (document.cookie = [
  69.                 encode(key), '=', stringifyCookieValue(value),
  70.                 options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
  71.                 options.path ? '; path=' + options.path : '',
  72.                 options.domain ? '; domain=' + options.domain : '',
  73.                 options.secure ? '; secure' : ''
  74.             ].join(''));
  75.         }
  77.         // Read
  78.  
  79.         var result = key ? undefined : {};
  81.         // To prevent the for loop in the first place assign an empty array
  82.         // in case there are no cookies at all. Also prevents odd result when
  83.         // calling $.cookie().
  84.         var cookies = document.cookie ? document.cookie.split('; ') : [];
  86.         for (var i = 0, l = cookies.length; i < l; i++) {
  87.             var parts = cookies[i].split('=');
  88.             var name = decode(parts.shift());
  89.             var cookie = parts.join('=');
  91.             if (key && key === name) {
  92.                 // If second argument (value) is a function it's a converter...
  93.                 result = read(cookie, value);
  94.                 break;
  95.             }
  97.             // Prevent storing a cookie that we couldn't decode.
  98.             if (!key && (cookie = read(cookie)) !== undefined) {
  99.                 result[name] = cookie;
  100.             }
  101.         }
  103.         return result;
  104.     };
  106.     config.defaults = {};
  108.     $.removeCookie = function (key, options) {
  109.         if ($.cookie(key) === undefined) {
  110.             return false;
  111.         }
  113.         // Must not alter options, thus extending a fresh object...
  114.         $.cookie(key, '', $.extend({}, options, {expires: -1}));
  115.         return !$.cookie(key);
  116.     };
  118. }));
jquery.cookie.js

 

cookie简单使用示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript" src="js/jquery.cookie.js"></script>
  8.     <script type="text/javascript">
  9.  
  10.         // 设置cookie 过期时间为7天，存在网站根目录下
  11.         //$.cookie('mycookie','ok!',{expires:7,path:'/'});
  12.  
  13.         //读取cookie
  14.         var mycookie = $.cookie('mycookie');
  15.         alert(mycookie);
  16.     </script>
  17. </head>
  18. <body>
  19.     <h1>测试页面</h1>
  20. </body>
  21. </html>
cookie简单使用示例

webstorage的使用示例-localStorage/sessionStorage 

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript">
  7.  
  8.         //localStorage.setItem("dat", "456");
  9.  
  10.         //sessionStorage.setItem('dat1','789');
  11.  
  12.     </script>
  13. </head>
  14. <body>
  15. <h1>测试webstorage</h1>
  16. </body>
  17. </html>
webstorage的使用示例

cookie练习-只弹一次的弹框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript" src="js/jquery.cookie.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             var hasread = $.cookie('hasread');
  11.             //alert(hasread);
  12.  
  13.             // 判断是否存了cookie，没有就弹出弹框
  14.             if (hasread == undefined) {
  15.                 $('.pop_con').show();
  16.             }
  18.             //用户点击知道后，存cookie，把弹框关掉
  19.             $('#user_read').click(function () {
  20.                 $.cookie('hasread', 'read', {expires: 7, path: '/'});
  21.                 $('.pop_con').hide();
  22.             })
  23.         })
  24.     </script>
  25.     <script type="text/javascript"></script>
  26.     <style type="text/css">
  28.         .pop_con {
  29.             display: none;
  30.         }
  32.         .pop {
  33.             position: fixed;
  34.             width: 500px;
  35.             height: 300px;
  36.             background-color: #fff;
  37.             border: 3px solid #000;
  38.             left: 50%;
  39.             top: 50%;
  40.             margin-left: -250px;
  41.             margin-top: -150px;
  42.             z-index: 9999;
  43.         }
  45.         .mask {
  46.             position: fixed;
  47.             width: 100%;
  48.             height: 100%;
  49.             background-color: #000;
  50.             opacity: 0.3;
  51.             filter: alpha(opacity=30);
  52.             left: 0;
  53.             top: 0;
  54.             z-index: 9990;
  55.  
  56.         }
  58.         .close {
  59.             float: right;
  60.             font-size: 30px;
  61.         }
  62.     </style>
  63. </head>
  64. <body>
  65.  
  66. <div class="pop_con">
  67.     <div class="pop">
  68.         亲！本网站最近有优惠活动！请强力关注！
  69.         <a href="#" id="close" class="close">×</a>
  70.  
  71.         <a href="javascript:;" id="user_read">朕知道了！</a>
  72.     </div>
  73.     <div class="mask"></div>
  74. </div>
  75.  
  76. <h1>网站内容</h1>
  77. </body>
  78. </html>
cookie练习-只弹一次的弹框

 

 

jqueryUI

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

jqueryUI 网址
http://jqueryui.com/

常用jqueryUI插件：

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

 

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>drag</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             $('.dragbar').draggable({
  11.                 axis: 'x',
  13.                 containment: 'parent',
  14.                 //containment:[0,0,600,0]
  15.  
  16.                 //设置拖动时候的透明度
  17.                 opacity: 0.6,
  19.                 drag: function (ev, ui) {
  20.                     //console.log(ui.position.left);
  21.  
  22.                     //获取拖动的距离                    
  23.                     var nowleft = ui.position.left;
  24.                     $('.progress').css({width: nowleft});
  25.                     $('.slide_count').val(parseInt(nowleft * 100 / 570));
  26.                 }
  27.             });
  28.         })
  29.     </script>
  30.     <style type="text/css">
  31.         .slidebar_con {
  32.             width: 650px;
  33.             height: 32px;
  34.             margin: 50px auto 0;
  35.         }
  37.         .slidebar {
  38.             width: 600px;
  39.             height: 30px;
  40.             border: 1px solid #ccc;
  41.             float: left;
  42.             position: relative;
  43.         }
  45.         .slidebar .dragbar {
  46.             width: 30px;
  47.             height: 30px;
  48.             background-color: gold;
  49.             cursor: pointer;
  50.             position: absolute;
  51.             left: 0;
  52.             top: 0;
  53.         }
  55.         .slidebar .progress {
  56.             width: 0px;
  57.             height: 30px;
  58.             background-color: #f0f0f0;
  59.             position: absolute;
  60.             left: 0;
  61.             top: 0;
  62.         }
  64.         .slide_count {
  65.             padding: 0;
  66.             float: right;
  67.             width: 40px;
  68.             height: 30px;
  69.             border: 1px solid #ccc;
  70.             text-align: center;
  71.             font-size: 16px;
  72.         }
  73.  
  74.     </style>
  75. </head>
  76. <body>
  77. <div class="slidebar_con">
  78.     <div class="slidebar">
  79.         <div class="progress"></div>
  80.         <div class="dragbar"></div>
  81.     </div>
  82.     <input type="text" name="" value="0" class="slide_count">
  83. </div>
  84. </body>
  85. </html>
拖拽滑动条示例

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>自定义滚动条</title>
  6.     <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  7.     <script type="text/javascript" src="js/jquery-ui.min.js"></script>
  8.     <script type="text/javascript">
  9.         $(function () {
  10.             var h = $('.paragraph').outerHeight();
  12.             //整体文本的高度减去外面容器的高度
  13.             var hide = h - 500;
  15.             $('.scroll_bar').draggable({
  16.                 axis: 'y',
  17.                 containment: 'parent',
  18.                 opacity: 0.6,
  19.                 drag: function (ev, ui) {
  20.                     var nowtop = ui.position.top;
  21.                     var nowscroll = parseInt(nowtop / 290 * hide);
  22.                     $('.paragraph').css({top: -nowscroll});
  23.                 }
  24.             });
  25.         })
  26.     </script>
  27.     <style type="text/css">
  28.         .scroll_con {
  29.             width: 400px;
  30.             height: 500px;
  31.             border: 1px solid #ccc;
  32.             margin: 50px auto 0;
  33.             position: relative;
  34.             overflow: hidden;
  35.         }
  37.         .paragraph {
  38.             width: 360px;
  39.             position: absolute;
  40.             left: 0;
  41.             top: 0;
  42.             padding: 10px 20px;
  43.             font-size: 14px;
  44.             font-family: 'Microsoft Yahei';
  45.             line-height: 32px;
  46.             text-indent: 2em;
  47.         }
  49.         .scroll_bar_con {
  50.             width: 10px;
  51.             height: 490px;
  52.             position: absolute;
  53.             right: 5px;
  54.             top: 5px;
  55.         }
  57.         .scroll_bar {
  58.             width: 10px;
  59.             height: 200px;
  60.             background-color: #ccc;
  61.             position: absolute;
  62.             left: 0;
  63.             top: 0;
  64.             cursor: pointer;
  65.             border-radius: 5px;
  66.         }
  67.     </style>
  68. </head>
  69. <body>
  70. <div class="scroll_con">
  71.     <div class="paragraph">
  72.         2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
  73.         掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
  74.         学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
  75.         学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
  76.         了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
  77.         了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
  78.     </div>
  79.     <div class="scroll_bar_con">
  80.         <div class="scroll_bar">
  81.         </div>
  82.     </div>
  83. </div>
  84. </body>
  85. </html>
网页自定义页面滚动条示例

 

原文链接：http://www.cnblogs.com/yifchan/p/html-1-12.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号