本地存储和jqueryUI制作滚动条

jqueryUI

jQueryUI专指由jQuery官方维护的UI方向的插件。
官方api
其他教程：jQueryUI教程
基本使用:
1. 引入jQueryUI的样式文件
2. 引入jQuery
3. 引入jQueryUI的js文件
4. 使用jQueryUI功能

jquery滚动条demo

html程序

  
                    

                                 
                                

                                 

                                     
                                        
                                    
                                
 
                                
张卜文
 
                                
   
                                  
                                 

                                    

                                         
                                            
                                        
                                    
 
                                    
俏宝
 
                                
                                
                                

                                    

                                         
                                            
                                        
                                    
                                    
刘昱
 
                                
                    
                    

                                
                                

                    


                
 
            

滚动条jQuery demo

$(function(){
           //获取整体段落的高度
           var h = $('.paragraph').outerHeight();
           //剩下没有出现的高度，500是容器的高度
           var hide = h - 230;

           //滚动自定义的滚动条
           $('.scroll_bar').draggable({
               axis:'y',
               containment:'parent',
               opacity:0.6,
               drag:function(ev,ui){
                   //当前已拖拽的高度
                   var nowtop = ui.position.top;
                   //换算出段落内容需要滚动多少
                   //父490-滑块200=290
                   var nowscroll = parseInt(nowtop/225*hide);
                   //设置（滑块向下时）内容向上滚动的距离
                   $('.paragraph').css({top:-nowscroll});
               }
           })
       })

本地存储

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

1、cookie 存储在本地，容量最大4k，
在同源的http请求时携带传递，
在设置的过期时间之前有效。

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。

demo

window.localStorage.setItem(key,value);//设置指定key的数据（JSON格式）
 
window.localStorage.getItem(key);//获取指定key的数据
window.localStorage.removeItem(key);//删除指定key的数据
 
window.localStorage.clear();//清空所有的存储数据
 
 
 
window.sessionStorage.setItem(key,value);
 
window.sessionStorage.getItem(key);
 
window.sessionStorage.removeItem(key);
 
window.sessionStorage.clear()

代码解析：

setItem(key,value) 向本地存储一条数据

getItem(key) 通过键名获取本地相应数据

key(index) 通过索引获取本相应地数据

removeItem(key) 通过键名删除本地相应数据

clear() 删除本地所有数据