1.拖拽動作流程：

          1、脫離文件流

          2、滑鼠相關動作，作用域，游標

                a、滑鼠按下   待拖動元素    游標在事件源元素中座標

                b、滑鼠移動    

                c、滑鼠彈起    document       移除滑鼠移動事件監聽

          3.計算容器寬高：

                element.clientWidth：包括邊框內部的寬度，去掉滾動條寬度

                element.clientHeight：包括邊框內部的高度

                element.offsetWidth：包括邊框及內部的寬度

                element.offsetHeight：包括邊框及內部的高度

           4.計算視窗寬高：

                  document.documentElement.clientWidth || document.body.clientWidth

                  document.documentElement.clientHeight || document.body.clientHeight

           5.常見預設行為：

                  1、點選超級連結進行跳轉

                  2、點選<input type=”submit”>按鈕進行表單元素提交

                  3、點選右鍵彈出右鍵快捷選單

                  4、頁面上元素不允許拖動

                   …………

          6.阻止預設行為：

               1、標準：

                     event.preventDefault();

               2、非標準（IE9）：

                    event.returnValue=false;

           7.元素在文件中的定位

                  element.offsetLeft：距其有定位父元素的左邊沿間距

                  element.offsetTop：距其有定位父元素的上邊沿間距

                  element.offsetParent：獲取元素最近有定位的祖先元素

2.儲存：

       會話跟蹤:

             1、是web程式中常用的技術，用來跟蹤使用者的整個會話

             2、為什麼需要：

                      a、一個使用者的所有請求都屬於同一個會話

                      b、不同使用者的請求屬於不同的會話

            3、常用技術：cookie與session

   1.cookie:

               1、作用：客戶端解決方案，本地資料儲存

               2、內容：文字字串（使用者名稱、密碼……）

               3.缺點：

                           1、形式：明文形式儲存（不安全）

                           2、會佔用上傳頻寬

                           3、儲存容量最大為4KB

               4.cookie的設定及傳送過程：

                     1、客戶端傳送http請求到伺服器端

                     2、伺服器端傳送http響應到客戶端，其中包括Set-Cookie頭部

                     3、客戶端傳送http請求到伺服器端，其中包括Cookie頭部

                     4、伺服器端傳送http響應到客戶端

               5.cookie語法：

                     儲存操作：

                              document.cookie=”key=value;expires=xxxx；path=/”;

                               key=value：儲存的cookie名與cookie值，都是字串內容。

                               expires：失效時間，是日期時間格式的字串，使用        dataObject.toUTCString()方法進行轉換。若不設定，        則會話結束，cookie失效。

                              path：cookie儲存路徑，即訪問作用域，若整個網站中都能    夠訪問這條儲存的cookie，通常將path設定為/。

                              domain：域名

                              secure：安全連結

                      修改操作:

                           覆蓋儲存，保持cookie名與路徑相同的情況下，修改  cookie儲存。

                       刪除操作：

                           覆蓋儲存，保持cookie名與路徑相同的情況，將失效時   間設定為當前系統時間。

                      查詢操作：

                            document.cookie來獲取當前目錄下的所有cookie

       2.session:

                   1、伺服器端會話跟蹤,每一次瀏覽器使用者發起新的資源請求，會在伺服器申請一個空間存放產生的唯一標識sessionID，以後每一次同一使用者再次請求該資源時，查詢是否存在該ID，若存在，則無需再次驗證，若不存在，則需再次驗證

sessionID儲存於服務端的cookie檔案當中。

                   2.session的生命週期：

                        1、存在於記憶體中且獨立，在第一次訪問伺服器時自動建立

                        2、只要使用者訪問，無論是否讀寫Session，伺服器都更新最後訪問時間

                        3、可以設定有效時間，超出時間未訪問過伺服器，則session失效

        3.webStorage:

                   1、HTML5本地儲存的解決方案之一

                   2、存在意圖：在於解決本來不應該cookie做卻不得不用cookie做的的本地儲存

                   3、API：localStorage和sessionStorage

                   4.localStorage:

                              1、資料永久儲存，除非刻意刪除或設定瀏覽器配置來刪除

                              2、作用域：文件源級別，文件源是通過協議、主機名埠三者來確定的。同源的文件共享同樣的localStorage資料。它們可以互相讀取對方的資料，甚至可以覆蓋對方的資料

                             3.屬性方法：

                                     1.獲取localStorage的長度：window.localStorage.length

                                     2.新增/編輯localStorage的內容：window.localStorage.setItem(鍵,值);

                                     3.根據對應的索引去獲取對應localStorage的key的值：window.localStorage.key(索引);

                                     4.根據對應的key獲取對應的的value：window.localStorage.getItem(key);

                                     5.清空同源的本地儲存資料：window.localStorage.clear();

                   5.sessionStorage:

                            1、資料臨時儲存，一旦視窗或標籤頁關閉，儲存資料就被刪除

                            2、作用域：視窗級別，如果同源的文件渲染在不同的瀏覽標籤頁中，那麼它們互相之間擁有的是各自的sessionStorage資料，無 法共享；一個標籤頁中的指令碼是無法讀取或覆蓋另一個標籤頁尾本寫入的資料。哪怕這兩個標籤渲染的是同一個頁面，執行的是同一個指令碼。即僅對某個會話有效。