前端之本地存储和jqueryUI
2019-06-16 16:07
2291 查看
本地存储
本地存储分为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);
};
}));
jquery.cookie.js
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>
cookie简单使用示例
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>
webstorage的使用示例
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>
cookie练习-只弹一次的弹框
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>
网页自定义页面滚动条示例
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 136.Python修炼之路【141-前端-JQuery-本地存储】2018.08.04
- 前端优化之本地存储
- 前端之js-本地存储-localStorage && IndexedDB
- 很全很全的前端本地存储讲解
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- web前端-在迷惘中的探索HTML5（二）本地存储之IndexDB
- 前端开发的客户端本地存储
- 前端的本地存储
- 前端本地存储localStorage及应用
- web前端实现本地存储
- 前端面试题 -----浏览器本地存储和Cookie的利弊
- 前端三种本地存储方式
- 前端 _本地存储问题
- 前端笔记知识点整合之HTML5&CSS3（上）新特性&音频视频&本地存储&自定义属性
- HTML5 indexedDB前端本地存储数据库实例教程
- 很全很全的前端本地存储讲解
- 三种前端本地存储方式讲解
- Web前端实现本地存储
- 【麦子学院】03.web前端开发之html5本地存储、网页留言板、video、audio、HTML5拖放
- 分享6个实用的HTML5本地存储(Local Storage)教程