localStorage 本地存储实践

admin

一、localStorage简单介绍
1、它是一种Web存储技术，允许在用户的浏览器中以键值对的形式存储数据。
2、它可将第一次请求的数据直接存储到本地，相比于cookie可以节约带宽。可以相当于一个前端页面数据库（约5M）。
4 n$ y0 ~1 [4 f1 H% U$ E# H. c3、它突破了cookie的4K限制，解决了cookie存储空间不足的问题。
4、localStorage数据可以直接获取，减少了客户端和服务器端的交互。
% K  Q3 y0 \% N: Y2 S6 y6 ]! D5、localStorage中的数据不会随每个HTTP请求发送到服务器。
6 Q' @" `1 K( Q+ S3 i6、localStorage数据会持久保存，除非用户手动清除或者网站代码删除。
/ }0 T9 v2 X7 i$ S1 G: Q: {7、localStorage遵循同源策略，这意味着只有与数据存储在相同协议、域名和端口的网页才能访问这些数据。
8、安全性相比于Cookie较弱，因为localStorage数据可以通过JavaScript访问。
二、localStorage小例
a基于localStorage以上特点，下面用js简单写了一个本地“网址导航”页面，以验证在没有服务器和数据库的情况下，用户也可以借助localStorage实现对复杂数据的添加、存储、读取、清除等操作（也可以修改操作略）。

复制代码
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>localStorage 本地存储</title>
  </head>
  <style>
     body { padding:0; margin:0; font-size:14px;}
     ul, li { list-style:none; margin:0; padding:0;}
     a { text-decoration:none;}
     #url,#name{width: 280px; height:30px; text-align: center;font-size:14px;margin-top: 15px;}     
     *{font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; margin: 0px;padding:0px; }
     .box{ margin: 0 auto; text-align: center; margin-top: 30px;width: 1300px;overflow: hidden; border: 1px solid #E9E9E9;padding-bottom: 20px;}
     .box h3{ line-height: 45px; font-size: 18px;text-align: left;text-indent: 15px; border-bottom: 1px solid #E9E9E9;}
     .box ul{ display: block;padding:20px;overflow: hidden;}
     .box span{ font-weight:bold;}
     #daohang li{float: left;width: 13.4%;text-align: center;line-height: 40px;margin: 2px;}
     #daohang li a { color:#666; display:block;}
     #daohang li a:hover { color:#666;}
     #daohang li:hover { background:#f6f6f6;}
     .btn{ width: 160px;; margin-top: 15px; font-size:20px; border:none; height: 40px; background-color:#0492de; color: #fff; cursor: pointer;font-weight:bold;}
     .btnB{background-color:#d00c0c; }  
 </style>

<body> 

<div class="box">
   <h3>我的网址导航</h3>
   <ul id="daohang"></ul>
</div>
<div class="box"> 
  <h3>请添加您的网站</h3> 
  <span>网站名称：</span><input type="text" id="name"> </br>
  <span>网站地址：</span><input type="text" id="url"></br>
  <input type="button" value="添加" onclick="add()" class="btn"> <input type="button" value="清除" onclick="del()" class="btn btnB">
</div>
</body>
</html>

复制代码
<script>
   window.onload = function() {
       var getLocalData = localStorage.getItem('localData');
       showLocalData(getLocalData);
   }
   //输出本地存储数据
   function showLocalData(getLocalData) {
       if (getLocalData == null) {
           var getLocalData = [];
           setLocalData(getLocalData);
       } else {
           var jsonObj = JSON.parse(getLocalData);
           for (var i = 0; i < jsonObj.length; i++) {
               var msg = document.getElementById("daohang");
               msg.innerHTML += "<li><a target='_blank'  href='" + jsonObj[i].url + "'>" + jsonObj[i].name + "</a></li>";
           }
       }
   }

   //增加指定的本地存储数据
   function add() {
       var getLocalData = localStorage.getItem('localData');
       getLocalData = eval('(' + getLocalData + ')');
       var name = document.getElementById('name').value;
       var url = document.getElementById('url').value; 
       //数据非空验证，其他验证略
       if(!isNull(name)&&!isNull(url)){
           var arr = {
               "name": name,
               "url": url
           };
           getLocalData.push(arr);
           setLocalData(getLocalData);
           alert("添加成功！");
           location.reload();
        }else{
            alert("数据不能空");
            return false;
        }    
   }

   //创建本地存储数据
   function setLocalData(getLocalData) {
       var strJsonData = JSON.stringify(getLocalData);
       localStorage.setItem('localData', strJsonData);
   }
   
   //删除指定的本地存储数据
   function del() {
       localStorage.removeItem('localData');
       alert("清除成功！");
       location.reload();
   }
  //数据值为空判断
  function isNull(val){       
       return (val =="" || val == undefined || val == null) ? 1 : 0;
   }
</script>