首页 > 其他分享> 文章详细

本地存储技术localStorage

2020-06-01 18:59:09 阅读：257 来源： 互联网

标签：存储技术 oBlock window localStorage 本地 var document 30px

本地存储技术：

　　localStorage(IE8以下不兼容）

　　　　1. 永久存储

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

　　　　3. 只能存储string

　　cookie

　　　　1.可以设置过期时间

　　　　2. 最大可以存4KB

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

　　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>

效果：

标签：存储技术,oBlock,window,localStorage,本地,var,document,30px
来源： https://www.cnblogs.com/smile01011/p/13026643.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

本地存储技术localStorage