一 Cookie 的优化

1.1 一般而言，我们设置cookie是在php中设置

例如：

<?php

setcookie('testKey1','hello world',0,'/');

//# 当 expires = 0 时，此Cookie随浏览器关闭而失效，

?>

而在验证的时候，我们通常是：

<?php

if(isset($_COOKIE['testKey2']))

  echo "The New COOKIE is : testKey2 = ".$_COOKIE['testKey2'];

else

  echo "The new COOKIE is setting failed";

?>

都是在服务端进行。优化：

1.2 在前端页面进行验证cookie

cookie保存在客户端，那么可以在客户端那边进行验证，根据上面的代码，前端获取代码为：

<script language="JavaScript" type="text/javascript">

var key1 = document.cookie.match(new RegExp("(^| )testKey1=([^;]*)(;|$)")); //正则找出testKey的cookie值

try{

  if(key1[2] != '')

    document.write("testKey1 = "+key1[2]);

}catch(e){

  document.write("testKey1 = NULL");

};

那么我们能否在前端设置cookie 呢 ?

1.3 在前端页面设置cookie【购物车原理】

function setCookie(){

  var expire = new Date();

  expire.setTime(expire.getTime() + 86400000);

  document.cookie = "testKey2=This the second Cookie;expires=" + expire.toGMTString() + ";path=/";

  alert('完成设置');

  location.href='test2.php'

}

这样子能够减轻服务器的压力

我们要注意，这样子是有限制的，浏览器本身能够存储的数据有限：

1.4 local storage

在谷歌浏览器下，f12可以看到：

这个可以看成是浏览器的小型数据库，可以存储更多的数据。

示例【购物车小试】：

设置页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Demo2</title>

<script language="JavaScript" type="text/javascript">

var cartLSName = 'abc';

//gdsInfo=[ID,NAME,AVATAR,PRICE,NUMBER]

function addToLS(gdsInfo){

  if(!window.localStorage){

    alert('您的浏览器不支持Local Storage!'); //如果不支持，可以采用第1.3中的方法

    return false;

  }

  try{

    if(gdsInfo.length != 5){

      alert('参数错误！');

      return false;

    }

  }catch(e){alert('参数错误！');return false}

  var gName=gdsInfo[1];

  gdsInfo[1]=encodeURI(gdsInfo[1]);

  gdsInfo[4]=parseInt(gdsInfo[4]);

  if(isNaN(gdsInfo[4])) gdsInfo[4] = 1;

  //由JSON字符串转换为JSON对象

  var cartLS = JSON.parse(localStorage.getItem(cartLSName));

  if(cartLS == null){

    cartLS=[gdsInfo];

  }else{

    var existInCart=false;

    for(var i=0;i<cartLS.length;i++){

      if(cartLS[i][0] == gdsInfo[0]){

        cartLS[i][4] += gdsInfo[4];

        existInCart = true;

        break;

      }

    }

    if(!existInCart)

      cartLS.splice(0,0,gdsInfo);

  }

  //将JSON对象转化为JSON字符,并存入LocalStorage

  localStorage.setItem(cartLSName,JSON.stringify(cartLS));

  return true;

}

</script>

</head>

<body>

<a href="javascript:addToLS([3,'华为Mate8','ico.jpg',3888.00,2]);" rel="external nofollow" >存储一</a><br />

</body>

</html>

效果：

有设置，就有查看：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Show LocalStorage Info</title>

<script language="JavaScript" type="text/javascript">

if(!window.localStorage){

  alert('您的浏览器不支持Local Storage!');

}

var cartLSName = 'abc';

var cartStr = localStorage.getItem(cartLSName)

//gdsInfo=[ID,NAME,AVATAR,PRICE,NUMBER]

function showStr(){

  str = decodeURIComponent(cartStr);

  alert(str);

  document.getElementById('show').innerHTML=str;

}

function showInfo(){

  var cartLS = JSON.parse(cartStr);

  if(cartLS == null){

    alert(NULL);

  }else{

    var str = '';

    for(var i=0;i<cartLS.length;i++){

      str += "ID:"+cartLS[i][0] + "\n";

      str += "Name:"+cartLS[i][1] + "\n";

      str += "Logo:"+cartLS[i][2] + "\n";

      str += "Price:"+cartLS[i][3] + "\n";

      str += "Num:"+cartLS[i][4] + "\n";

    }

    str = decodeURIComponent(str);

    alert(str);

    document.getElementById('show').innerHTML=str.replace(/\n/g,"<br />");

  }

}

function clearLS(){

  localStorage.clear();

}

</script>

</head>

<body>

<a href="javascript:showStr();" rel="external nofollow" >以字符串形式显示</a><br />

<a href="javascript:showInfo();" rel="external nofollow" >显示详细</a><br />

<a href="javascript:clearLS();" rel="external nofollow" >清空</a><br />

<a href="./" rel="external nofollow" >返回设置页面</a><br />

<div id="show"></div>

</body>

</html>
效果

以字符串形式显示

 

显示详细

 

以上这篇cookie的优化与购物车实例就是小编分享给大家的全部内容了，希望能给大家一个参考

第一种方式：cookie的优化与购物车实例的更多相关文章

  1. Unity 人物跟谁手指的移动(第一种方式)

    长夜漫漫无心睡眠,敲敲代码,越敲越来劲! 我发现好多小朋友都在玩熊出没之xxxx这个游戏,居然打了一下午都没玩通第2关,我把测试也叫来陪我一起玩! 结果他也打不通,我再去叫策划,他也没打过,我去叫主管 ...

  2. UserView--第二种方式（避免第一种方式Set饱和），基于Spark算子的java代码实现

      UserView--第二种方式(避免第一种方式Set饱和),基于Spark算子的java代码实现   测试数据 java代码 package com.hzf.spark.study; import ...

  3. 创建多线程的第一种方式——创建Thread子类和重写run方法

    创建多线程的第一种方式——创建Thread子类和重写run方法: 第二种方式——实现Runnable接口,实现类传参给父类Thread类构造方法创建线程: 第一种方式创建Thread子类和重写run方 ...

  4. Struts2框架的数据封装一之属性封装（属性封装的第一种方式：对参数进行封装）

    request带着参数来,aciton对其进行处理.在学习action之前,使用的是servlet对request进行处理.request请求时会带有参数,所以我们要对这些参数进行封装. 1. 为什么 ...

  5. Spring整合Struts2框架的第一种方式（Action由Struts2框架来创建）。在我的上一篇博文中介绍的通过web工厂的方式获取servcie的方法因为太麻烦，所以开发的时候不会使用。

    1. spring整合struts的基本操作见我的上一篇博文:https://www.cnblogs.com/wyhluckdog/p/10140588.html,这里面将spring与struts2 ...

  6. 创建多线程程序的第一种方式_创建Thread类的子类

    创建多线程程序的第一种方式:创建Thread类的子类java.lang.Thread类:是描述线程的类,我们想要实现多线程程序,就必须继承Thread类 实现步骤: 1.创建一个Thread类的子类 ...

  7. throws关键字_异常处理的第一种方式(交给别人处理)和try_catch_异常处理的第二种方式(自己处理)

    throws关键字:异常处理的第一种方式,交给别人处理 作用: 当方法内部抛出异常对象的时候,那么我们就必须处理这个异常对象 可以使用throws关键字处理异常对象, 会把异常对象声明抛出给方法的调用 ...

  8. COOKIE的优化与购物车小试

    由于经常被抓取文章内容,在此附上博客文章网址:,偶尔会更新某些出错的数据或文字,建议到我博客地址 :  --> 点击这里 一 Cookie 的优化 1.1 一般而言,我们设置cookie是在ph ...

  9. 主线程和创建多线程程序的第一种方式_创建Thread类的子类

    /** * 主线程:执行主方法的线程(main) * 单线程程序:在java程序中只有一个线程 * 执行从main方法开始,从上倒下依次执行 */ public class Demo01MainThr ...

随机推荐

  1. ThinkPHP5.0中报错could not find driver的解决方式

    这个报错是我的tp5项目转移到另外的服务器中发生的错误, 其中报错信息中还包含这pdo等字眼 解决方法:在php.ini中开启php_pdp_mysql.dll

  2. KDD2015,Accepted Papers

    Accepted Papers by Session Research Session RT01: Social and Graphs 1Tuesday 10:20 am–12:00 pm | Lev ...

  3. LintCode_111 爬楼梯

    题目 假设你正在爬楼梯,需要n步你才能到达顶部.但每次你只能爬一步或者两步,你能有多少种不同的方法爬到楼顶部? 比如n=3,中不同的方法 返回 3 1 2 3 5 8 13... step[2] = ...

  4. WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放

    WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放    开发环境:   Microsoft Windows 7 SP1 Microsoft.NET Framework 4.0 ( ...

  5. Directx11教程38 纹理映射(8)

    原文:Directx11教程38 纹理映射(8)      上篇日志中,我们用纹理和光照颜色调制的方式得到最终颜色,本章我们尝试用纹理采样的颜色,直接做为材质的漫反射系数Kd,并用它来做光照计算,最后 ...

  6. RocksDB 之Write Ahead Log（WAL）

    Overview RocksDB 中有三个基本的数据结构概念:memtable, sstfile 和 logfile memtable 是个内存数据结构,新写入会插入memtable 切回选择性地写入 ...

  7. 神舟mini pcs-b wifi-bt 驱动

    最新mini pcs ssd硬盘版 安装win10后蓝牙设备找不到,显示usb获取设备符失败, 卸载wifi驱动,安装以下驱动,两个链接应该都可以. TW: https://downloadcente ...

  8. springboot项目启动，但是访问报404错误

    启动类Application上加了@ComponentScan(basePackages = {})这个注解导致controller扫描不到导致的,如果加了这个注解,springboot就不会扫描Ap ...

  9. Nuxt.js打造旅游网站第1篇_项目环境搭建

    1. 安装 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxtjs项目. npx create-nuxt-app xianyun 注意:在NPM版本5.2.0默认安装了npx, ...

  10. 注意特殊情况！最长上升子序列！！poj2533

    poj 2533 简单的动归.用O(n^2)的算法也能过.但是有个细节!刚开始ans初始化为0时是错的!!!要初始化为1.因为只有1个数的时候,下面的循环是不会执行的.....或者特判.. #incl ...