本地存储技术localStorage

本地存储技术：

　　localStorage(IE8以下不兼容）

　　　　1. 永久存储，除非手动改清除

　　　　2. 最大可以存储5M 客户端的一个微型数据库

　　　　3. 只能存储string

　　cookie

　　　　1.可以设置过期时间，过期时间之前一直有效，即使窗口或浏览器关闭

　　　　2. 最大可以存4KB

　　　　3. 每一个域名下面最多可以存储50条数据

　　sessionStorage(结合后台使用）

　　　　1. sessionStorage在关闭窗口或标签页之后将会删除这些数据。

　　====================localStorage 对象=====================

　　setItem(name,value);

　　getItem(name);

　　removeItem(name);

　　案例：刷新页面，滑动条记住上次的滑动位置

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>滑动条</title>
 6     </head>
 7     <style>
 8         #slide{position: relative;width: 600px;height: 30px;border: 2px solid hotpink;margin: 100px auto;border-radius:30px;}
 9         #block{width: 30px; height: 30px;background-color:hotpink;position: absolute;left: 0px;border-radius: 30px;}
10         #full{width: 0px;height: 30px;background-color: pink;position: absolute;top: 0px;left: 0px;border-radius:30px;}
11     </style>
12     <body>
13         <div id="slide">
14             <div id="full"></div>
15             <div id="block"></div>
16         </div>
17     </body>
18     <script>
19         window.onload = function(){
20             var oSlide = document.getElementById("slide");
21             var oFull = document.getElementById("full");
22             var oBlock = document.getElementById("block");
23             
24             //重新获取是否存储滑动的位置
25             if(!window.localStorage){
26                 alert("该浏览器不支持localStorage");
27             }else{
28                 //取出本地存储中的值
29                 var l = localStorage.getItem("slide") ? localStorage.getItem("slide"):0;
30                 oBlock.style.left = l +'px';
31                 //填充部分要跟随滑块进行填充
32                 oFull.style.width = parseInt(l)+30+'px';
33             }
34             
35             oBlock.onmousedown = function(ev){
36                 var e = ev||window.event;
37                 var offsetX = e.clientX - oBlock.offsetLeft;
38                 
39                 document.onmousemove = function(ev){
40                     var e = ev||window.event;
41                     var l = e.clientX - offsetX;
42                     //限制滑块出界
43                     if(l<=0){l = 0;}
44                     if(l>=600-30){l = 570;}
45                     oBlock.style.left = l +'px';
46                     
47                     //填充部分要跟随滑块进行填充
48                     oFull.style.width = l+30+'px';
49                     
50                     //对当前滑块的位置进行本地存储
51                     if(!window.localStorage){
52                         alert("该浏览器不支持localStorage");
53                     }else{
54                         localStorage.setItem("slide",l);
55                     }
56                 }
57             }
58             document.onmouseup = function(){
59                 document.onmousemove = null;
60             }
61         }
62     </script>
63 </html>

效果：