利用php实现一周之内自动登录存储机制,localStorage实现便签小程序

前言:今天写了个小练习,把这几天看的东西巩固一下,在这个程序中用到了localStorage存储和json串的转换。

频繁ajax请求导致页面响应变慢。于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求。

cookie、session、localStorage这三个应该是最让程序员头疼的了,我利用简单的登录界面的username和password来说明一下吧.

下面是具体的实现代码:

鉴于localstorage中只能存储字符串,所以我们要借助于JSON.stringify()和JSON.parse();

1.cookie用来存储用户相关数据,存储的位置在用户本地:

(1)首先判断是否存在用户,从而显示相应的界面

$.ajax({
type: "get",
async: "true",
url: "",
data: {},
dataType: "jsonp",
success: function(data){
if(data instanceof Array){
stroage.push(JSON.stringify(data[i])); //storage是外部定义的数组 storage = []
}
},
error: function(){
}
});

首先是登录界面定义:

function isUser()
{
  var storage = window.localStorage;
  if (storage.user != undefined)
  {
    document.getElementById("showmess").style.display = "block";
    document.getElementById("fillmess").style.display = "none";
  }
  else
  {
    document.getElementById("showmess").style.display = "none";
    document.getElementById("fillmess").style.display = "block";
  }  
}

现在,我们将data存储在了storage中,当我们需要使用时:

<form action="server.php" method="post"> 
        <input type="text" name="username" class="username" placeholder="Username"> 
        <input type="password" name="password" class="password" placeholder="Password"> 
        <button type="submit">Sign me in</button> 
        <div class="error">+</div> 
      </form> 

(2)存储用户信息

fucntion getData(){
window.localStorage.job = JSON.stringify(storage); //将storage转变为字符串存储
var job = JSON.parse(window.localStorage.job);
for(var i = 0; i < job.length; i++){
job[i] = JSON.parse(job[i]);
}
//此时job中存储的就是对象数组了
}

上面的代码大家都懂吧,就是一个表单.然后就是action的server.php服务器处理,

var pic; //全局变量存储图片信息
/*从本地电脑获得图片*/
 function add_files(files) {
        if (files.length) {
          var file = files[0];
          var reader = new FileReader();
          reader.onload = function(e) {
            document.getElementById("userpic").src = e.target.result;
            pic = e.target.result;
          }
          reader.readAsDataURL(file);
        }
      }
function saveUserMess()
{
  var name = document.getElementById("username").value;
  if (name != "")
  {
    var storage = window.localStorage;
    var jsonObj = {
                name:name,
                icon:pic
              }; 
      var user = JSON.stringify(jsonObj);
      storage.setItem("user",user);
  }
  else
  {
    alert("昵称不为空"); 
  }
}

本地存储外,除了localStorage,还有sessionStorage.

<?php 
/** 
 * Created by PhpStorm. 
 * User: Administrator 
 * Date: 2016-7-19 
 * Time: 11:50 
 */ 
include "data.php"; 
header("Content-type:text/html;charset=utf-8"); 
//echo "ddd"; 
if ($_SERVER["REQUEST_METHOD"] == "POST") {//第一步 
//  echo "ddd1"; 
  if ($_POST["username"] == $info["username"] && $_POST["password"] == $info["password"]) {//第二步 
    $myArr = $_POST; 
    $myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time())); 
    se($myArr); 
    setcookies($_POST["username"], $_POST["password"]); 
    setStroage($_POST["username"], $_POST["password"]); 
    echo "<script> 
   window.location.href='index.php'; 
  </script>"; 
  } 
} else { 
  echo "<script> 
alert('请登录'); 
window.location.href='login.html'; 
</script>"; 
} 
//通过session保存到服务器 
function se(array $arr) 
{ 
  session_start(); 
  $_SESSION["username"] = $arr["username"]; 
  $_SESSION["password"] = $arr["password"]; 
  $_SESSION["loginIP"] = $arr["loginIP"]; 
  $_SESSION["loginTime"] = $arr["loginTime"]; 
} 
//通过cookie保存到本地 
function setCookies($username, $password) 
{ 
  setcookie("username", $username, time() + 120); 
  setcookie("password", $password, time() + 120); 
} 

//echo "<script> 
// 
//  localStorage.setItem('username','$username'); 
//localStorage.setItem('password'," . "'" . $password . "'" . "); 
//</script>"; 
function setStroage($username, $password){ 
  echo "<script> 
  localStorage.setItem('username'," . "'" . $username . "'" . "); 
  localStorage.setItem('password'," . "'" . $password . "'" . "); 
  </script>"; 
} 

图片 1

(1)localStorage和sessionStorage都是用来存储客户端临时信息的对象。

上面加载了一个data.php其实里面就是一条数据,

(3)用户输入便签内容,并保存

(2)localStorage和sessionStorage都只能存储字符串类型的对象

$info=array("username"=>"admin","password"=>"admin"); 
function save_diary()
{
 var headle = document.getElementById("headle").value;
 var cont = document.getElementById("diary").value;
 if (headle != "" && cont != "")
 {
  var storage = window.localStorage;
  if (storage.diary != undefined)
  {
   var diary = storage.getItem("diary");
   var jsonObj = JSON.parse(diary);
   var diaryItem = {
        headle:headle,
        diary:cont,
        date:new Date()
       }; 
   jsonObj.push(diaryItem);
   var data = JSON.stringify(jsonObj);
   storage.setItem("diary",data); 
  }

  else
  {
   var jsonObj = [{
        headle:headle,
        diary:cont,
        date:new Date()
       }]; 
   var diary = JSON.stringify(jsonObj);
   storage.setItem("diary",diary);
  }
 }
 else
 {
  alert("标题和内容不为空哦"); 
 }
}

(3)localStorage生命周期是永久,除非用户手动清除localStorage信息,否则这些信息将永远存在。

这个数据主要是核对输入的用户名和密码是否正确.

图片 2

(4)sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么通过sessionStorage中存储的数据也就被清空了。

首先在server里面对不也是判断是不是post请求,如果不是就提示重新登录,返回登录界面,确定是post之后,再进行判断信息是不是输入正确,如果正确就setcookie一下.下面的代码我一一解释

(4)将用户便签信息显示在见面

(5)不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。

$myArr = $_POST;//把post传过来的数据放在myarr;里面 
    $myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time()));//这是穿的另外两个参数,一个是用户登录地址,另一个是cookie存活时间(会在寻获时间以为消失) 
    se($myArr); 
    setcookies($_POST["username"], $_POST["password"]);//这个是设置cookie,把传过来的两个值设置成cookie,会有一个getCookie进行接收 
    setStroage($_POST["username"], $_POST["password"]); 
    echo "<script> 
  window.location.href='index.php'; 
function showDiary()
{
  var storage = window.localStorage;
  var mess = JSON.parse(storage.user);
  if (storage.diary != undefined)
  {
    var json = JSON.parse(storage.diary);
    var div_id = document.getElementById("diarymess");
    for (var i = 0; i < json.length; i++)
    {

      div_id.innerHTML+='<div><button class="btn btn-success"'+'type="button" id="dropdownMenu" onclick="show(this)"><div class="col-md-4"><img src='+mess.icon+' class="img-circle size" id="userpic"><br><font style="text-align:center">'+mess.name+'</font></div><div class="col-md-8"><h2>'+json[i].headle+'</h2><font>'+json[i].date+'</font></div>'+'</button><p style="display:none">'+json[i].diary+'</p><div>'; 
    }

  }
}

以上所述是小编给大家介绍的在localStorage中存储对象数组并读取的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

其实这时候cookie已经按我们设置的那个时间存储下来了,然后我们要做的就是免登陆功能,的后台服务器的处理,就像我们登陆其他软件,会提示一周之内免登陆密码,

图片 3

您可能感兴趣的文章:

  • JS
    localStorage实现本地缓存的方法
  • 详解JavaScript中localStorage使用要点
  • 使用jquery读取html5
    localstorage的值的方法
  • android webview
    中localStorage无效的解决方法
  • 用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
  • cookie解决微信不能存储localStorage的问题
  • 利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
  • 移动端使用localStorage缓存Js和css文的方法(web开发)
  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失
  • 本地存储localStorage用法详解

就是下面的代码:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

function intialLoadInfo(){ 
    $("input:text").val(getCoolieByKey("username"));//这两个就是吧下面获取的之前输入过的用户名和密码进行自动填写(实现目的) 
    $("input:password").val(getCoolieByKey("password")); 
  } 
  //通过key值获取cookie 
  function getCoolieByKey(key){ 
    var cookie=document.cookie.split(";");//这行代码是吧cookie的值进行分离(split),以便于下面遍历(分离后就是一个数组一样) 
    for(var i=0;i<cookie.length;i++){//遍历长度 
      var value=cookie[i].trim();//去掉空格 
      if (value.indexOf(key)==0){//判断是不是第一个值 
        val=value.split("="); 
        console.log(val[0]); 
        return val[1]; 
      } 
    } 
  } 

您可能感兴趣的文章:

  • python制作一个桌面便签软件
  • jQuery实现tag便签去重效果的方法
  • JS
    localStorage实现本地缓存的方法
  • 使用jquery读取html5
    localstorage的值的方法
  • 详解JavaScript中localStorage使用要点
  • android webview
    中localStorage无效的解决方法
  • 在localStorage中存储对象数组并读取的方法
  • cookie解决微信不能存储localStorage的问题
  • android 中 webview 怎么用
    localStorage
  • Javascript
    计算字符串在localStorage中所占字节数

上面第一个方法执行getCookieByKey(key);

这个带参数的函数接收的参数就是我们上面封装好的myArr数据了;

然后详细解释就在代码了,大家可以参考了.

2.session:session是用来在服务器端存储用户信息,当浏览器关闭的时候,会自动销毁;

session_start();

超级数组$_SESSION可以实现session的设置与读取;

代码如下:

function se(array $arr) 
{ 
  session_start(); 
  $_SESSION["username"] = $arr["username"]; 
  $_SESSION["password"] = $arr["password"]; 
  $_SESSION["loginIP"] = $arr["loginIP"]; 
  $_SESSION["loginTime"] = $arr["loginTime"]; 
} 

首先就会上面的代码,一样是获取四个属性,放到我们的$_SESSION里面;存储下来:

然后就是上面那个代码,带啊可以看到有一个se

$myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time()));//这是穿的另外两个参数,一个是用户登录地址,另一个是cookie存活时间(会在寻获时间以为消失) 
    se($myArr); 

这里就是为了session写的;

他主要是存储四个属性,username.password.IP.time

上面代码中也注释;其实现在我们就可以在session里面查到我们这个自己创建的session了

3.JS端的localStorage:HTML5提供的本地存储方式(可以称为“键值对”数据库);

设置数据:localStorage.setItem(“key”,”value”);
读取数据:localStorage.getItem(“key”);读取的结果是一个字符串;
删除数据:localStorage.removeItem(“key”);

详细代码如下:

在html下面写的js文件就是  然后就是实现:

$(function (){ 
    if (localStorage.getItem("username")!=""&&localStorage.getItem("password")!=""){ 
      document.getElementById("username").value=localStorage.getItem("username"); 
      document.getElementById("password").value=localStorage.getItem("password"); 

    } 
  }); 

 这个函数主要就是创建用php创建的

function setStroage($username, $password){ 
  echo "<script> 
  localStorage.setItem('username'," . "'" . $username . "'" . "); 
  localStorage.setItem('password'," . "'" . $password . "'" . "); 
  </script>"; 
} 

其实这个东西需要自己慢慢写,我虽然能写出来,但是每次用的时候还是要参考一下这个例子,所以希望我用了好长时间的万能例子对大家有用,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

您可能感兴趣的文章:

  • JS
    localStorage实现本地缓存的方法
  • 详解JavaScript中localStorage使用要点
  • 使用jquery读取html5
    localstorage的值的方法
  • android webview
    中localStorage无效的解决方法
  • 在localStorage中存储对象数组并读取的方法
  • 用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
  • cookie解决微信不能存储localStorage的问题
  • 移动端使用localStorage缓存Js和css文的方法(web开发)
  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失
  • 本地存储localStorage用法详解

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注