本地储存与jQueryui

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

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

• 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。
例:

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        //写入
        //[{"id":1,"num":2,....},{}..]
        localStorage.setItem('mystorage','ok!');
        //读取
        alert(localStorage.mystorage);//ok!
        //写入
        // sessionStorage.setItem('name','tom');
        //读取
        alert(sessionStorage.name);//tom//没有弹undefined
        localStorage.setItem('mystorage','{"goods":["1","2"]}');
    </script>

jqueryUI

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

jqueryUI 网址
http://jqueryui.com/

常用jqueryUI插件：

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

<style type="text/css">
        .con{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 50px auto 0;
        }
        .box{
            width: 50px;
            height: 50px;
            background-color: gold;
            cursor: pointer;/*鼠标经过时指针为手的形状*/
        }
    </style>
    <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(){
            //draggable()使盒子可以任意拖动
            $('.box').draggable({
                //约束元素在父级内拖动
                containment:'parent',
                //限制在X轴方向上可以拖动
                axis:'x',
                //拖动时透明度变为60%
                opacity:0.6,
                //可以返回拖动的参数
                drag:function(ev,ui){
                    // console.log(ui);//json格式的对象，offset是绝对位置，position是相对父级的位置
                    console.log(ui.position.left);//从左到右是1到250
                }
            });
        })
    </script>
</head>