利用php实现一周之内自动登录存储机制(cookie、session、localStorage)

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

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

首先是登录界面定义:

<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"><span>+</span></div>
      </form>

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

<?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>";
}

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

$info=array("username"=>"admin","password"=>"admin");

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

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

$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';

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

就是下面的代码:

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];
      }
    }
  }

上面第一个方法执行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>";
} 

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

时间: 2016-10-28

使用jquery读取html5 localstorage的值的方法

在HTML 5中,localstorage是个不错的东西,在支持localstorage的浏览器中, 能持久化用户表单的输入,即使关掉浏览器,下次重新打开浏览器访问,也能读出其值, 下面给出的例子是使用jquery 在每次表单加载的时候,读localstorage的值,而在表单每次提交时则清楚其值的例子 首先是一个表单: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars

移动端使用localStorage缓存Js和css文的方法(web开发)

将jquery和公共样式缓存到localStorage,可以减少Http请求,从而优化页面加载时间,下面的代码可以实现此功能: <script type="text/javascript"> //入口函数 if (window.localStorage) { initJs(); initCss("css", "/gfdzp201508257998/Turntable/Style/css_whir.css"); } else { add

本地存储localStorage用法详解

一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 二.localStorage的优势与局限 localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可

JS中利用localStorage防止页面动态添加数据刷新后数据丢失

非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

JS localStorage实现本地缓存的方法

复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>   <head>     <title>本地缓存</title>     <script type="text/javascript">         var strKey = "strKey";        

cookie解决微信不能存储localStorage的问题

在开发基于微信的Web页面时,发现有些机型不能存储信息到localStorage中,或者是页面一旦关闭,存储的信息也失效了. 用cookie来替代localStorage,存储一些简单的数据.上网查找了一下,发现w3school上已有不错的解决方案. 设置cookie: function setCookie(c_name,value,expiredays) { var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) do

在localStorage中存储对象数组并读取的方法

频繁ajax请求导致页面响应变慢.于是考虑将数据存储在window.storage中,这样只请求一次ajax,而不需要频繁请求. 鉴于localstorage中只能存储字符串,所以我们要借助于JSON.stringify()和JSON.parse(); $.ajax({ type: "get", async: "true", url: "", data: {}, dataType: "jsonp", success: func

android webview 中localStorage无效的解决方法

我在 android里面 使用html5的 localStorage 为什么存不进去也读不出来呀? 网上搜了好多都没效果 复制代码 代码如下: mainWebView = (WebView)this.findViewById(R.id.mainWebView);         WebSettings settings = mainWebView.getSettings();         settings.setJavaScriptEnabled(true);         setting

详解JavaScript中localStorage使用要点

localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题. localStorage有以下几个特点 1.localStorage是一个普通对象,任何对象的操作都适用. 2.localStorage对象的属性值只能是字符串. 这个需要特别注意了,假设我们要保存一个对象到localStorage中,可以使用拼接的方式.如 var obj = { "na=me": "chua", age: 9 } //拼接到

用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果

研究了一上午,终于做出了,实时获取本地localStorage来模拟注册登入~~~ <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>我们虽然很穷,但是我们有梦想</title> <script src="angular.js"></script> </he

详解vue 模拟后台数据(加载本地json文件)调试

本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

sql存储过程实例--动态根据表数据复制一个表的数据到另一个表

动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track_10,就把此记录复制到track_10中 创建一个 sub_track的存储过程实现: -- 创建一个 名为sub_track的存储过程 CREATE PROCEDURE sub_track() begin declare i int; -- 定义 循环变量i set @imei =0; -- 定

express+mockjs实现模拟后台数据发送功能

前言: 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据. 模拟数据方法 1.通过js变量模拟后台数据 优点:不需要服务器 缺点:需要造很多变量,同时还要将变量在我们的有效代码中使用,最后还得删除 2.通过ajax请求json文件 优点:只需要配置路径,就可以访问,进入联调阶段不用修改大量的js代码 缺点:ajax存在跨域问题,通常无法请求本地文件,即使火狐也存在不能访问不同文件

MockJs结合json-server模拟后台数据

本文实例为大家分享了MockJs结合json-server模拟后台数据的具体代码,供大家参考,具体内容如下 说明 Mock.js 是一款模拟数据生成器,可以根据模板生成数据.模拟网络请求,返回模拟数据等 更多细节参考 官网 示例 1. 安装 下载 mkdir moke-test cd moke-test npm init sudo npm install --save-dev json-server mockjs ip mkdir server #创建本地服务文件夹 2. 配置 json-ser

vue+webpack模拟后台数据的示例代码

一.在webpack-dev-conf.js文件中: 1.在const portfinder = require('portfinder')后添加如下内容 const express = require('express') const app = express() //请求server var appData = require('../mock/goods.json') //加载本地数据文件 var apiRoutes = express.Router() app.use(apiRoute

使用json-server简单完成CRUD模拟后台数据的方法

在开发中,后端的接口往往是较晚出来的,但是有时候我们必须给前端页面一些虚假的数据去开发,这个时候一些mock工具就很有必要了,最终我选择了 json server 工具,因为它足够简单,而且也能和你们所熟知的Mock.js 配合模拟数据(思考:mockjs是可以作为一个独立的 mock server 存在,但为什么不单独用它?). 安装 npm install json-server -g 安装完成后可以用 json-server -h 命令检查是否安装成功. json-server [opti

Vue-cli项目获取本地json文件数据的实例

在自己做的vue demo项目中,我想通过在本地添加一些json数据,写到json文件中,并且通过异步请求获取到,然后加载数据. axios.get('http://localhost:8080/datas/json') 然而在这一过程中,我的访问总是404.通过查阅,我发现,在vue-cli基础上构建的项目中,只有static目录才是vue-cli向外暴露的静态数据文件夹,我放在static下的图片可以正常访问到,我是在static同级目录新建了datas目录,将json文件放入datas目录

详解vue2.0模拟后台json数据

最近在跟着做vue2.0以上版本的一个购物平台,在涉及到模拟后台数据交互的时候,视频里讲的是通过json-server这个插件和express,由于之前的配置都是在build/dev-server.js文件夹下,在vue2.0都没有了,全部整合到了build/webpack.dev.conf.js文件里,通过不断查阅资料后终于模拟成功. 1.首先 npm install vue-resource  --save安装vue-resourse,并且在页面上引用(--save 会把依赖包名称添加到 p

实时获取股票数据的android app应用程序源码分享

最近学习Android应用开发,不知道写一个什么样的程序来练练手,正好最近股票很火,就一个App来实时获取股票数据,取名为Mystock.使用开发工具Android Studio,需要从Android官网下载,下载地址:http://developer.android.com/sdk/index.html.不幸的是Android是Google公司的,任何和Google公司相关的在国内都无法直接访问,只能通过VPN访问. 下图为Android Studio打开一个工程的截图: 下面按步介绍Myst