由于经常被抓取文章内容，在此附上博客文章网址：，偶尔会更新某些出错的数据或文字，建议到我博客地址 :  --> 点击这里

一 Cookie 的优化

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

例如：

<?php

setcookie('testKey1','hello world',,'/'); //# 当 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[] != '')

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

}catch(e){

    document.write("testKey1 = NULL");

};

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

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

function setCookie(){

    var expire = new Date();

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

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

    alert('完成设置');

    location.href='test2.php'

}

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

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

上述是从网上找来，仅供参考，如果我们要存储更多的数据。可以使用：

1.4 local storage

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

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

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

更多的关于localStorage相关的，可以看：http://www.w3school.com.cn/html5/html_5_webstorage.asp

示例【购物车小试】：

设置页面：

<!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 != ){

            alert('参数错误！');

            return false;

        }

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

    var gName=gdsInfo[];

    gdsInfo[]=encodeURI(gdsInfo[]);

    gdsInfo[]=parseInt(gdsInfo[]);

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

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

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

    if(cartLS == null){

        cartLS=[gdsInfo];

    }else{

        var existInCart=false;

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

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

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

                existInCart = true;

                break;

            }

        }

        if(!existInCart)

            cartLS.splice(,,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]);">存储一</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=;i<cartLS.length;i++){

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

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

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

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

            str += "Num:"+cartLS[i][] + "\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();">以字符串形式显示</a><br />

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

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

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

<div style="margin-top:20px;padding:10px" id="show"></div>

</body>

</html>

效果：

以字符串形式显示

显示详细

COOKIE的优化与购物车小试的更多相关文章

  1. 第一种方式：cookie的优化与购物车实例

    一 Cookie 的优化 1.1 一般而言,我们设置cookie是在php中设置 例如: <?php setcookie('testKey1','hello world',0,'/'); //# ...

  2. php中cookie+mysql实现的购物车代码

    <?php//购物车session的产生代码if(! $session && ! $scid) { /* session用来区别每一个购物车,相当于每个车的身份证号: scid只 ...

  3. 用js+cookie实现商城的购物车功能

    页面上的添加功能主要就是两个按钮 <input name="buy" type="image" alt="第一个商品" src=&qu ...

  4. scrapy框架携带cookie访问淘宝购物车

    我们知道,有的网页必须要登录才能访问其内容.scrapy登录的实现一般就三种方式. 1.在第一次请求中直接携带用户名和密码. 2.必须要访问一次目标地址,服务器返回一些参数,例如验证码,一些特定的加密 ...

  5. 关于SQL优化的一个小试例子

    原SQL: select ta.serialno,       ta.accepttime,       ta.subsnumber,       ta.subsname,       ta.cont ...

  6. 【java】Cookie购物车实现

    前言 一个基于Cookie的购物车实现 话不多说,直接上代码 导包 import java.net.URLDecoder; import java.util.ArrayList; import jav ...

  7. [转].net cookie版购物车

    本文转自:http://www.sulong.cc/article/program/aspx/110613114249.html #region 添加到购物车AddShoppingCar /// &l ...

  8. ASP.NET购物车Cookie获取，创建，添加，更新，删除的用法

    #region 添加购物车 public void GetShoppingCart(int skuId, int quanlity) { HttpCookie cookie = HttpContext ...

  9. Cookie实现购物车功能

    这里的购物车暂时存放书,后期把参数改成Object,把方法抽取成接口,只要实现了接口的Object类都可以放进购物项,这样就实现了购物任何物品 使用购物项因为一个购物项可以包含某种商品的数量,总价等, ...

随机推荐

  1. 添加自己的discuz 的积分策略

    在参考了网上的一些文章和discuzx开发手册,开始操作:1.在数据库表pre_common_credit_rule增加一条记录,rulename填“填写推荐人”,action填“txtjr”(跟下面 ...

  2. java.lang.NoClassDefFoundError: weblogic/kernel/KernelStatus

    solution Step: 1.In the classpath tab, be sure to add the wlclient.jar file located here \wlserver_1 ...

  3. VS2010生成的文件在别的机器上运行提示“丢失MSVCR100D.dll”<转>

    用vs2010编写的程序经常会发生的一个问题.在自己的机器上运行的好好的,但是在别的机器上就会发生没有找到MSVCR100D.dll.这是 个很头疼的问题.对于一些代码量几百行的小程序,我不可能要求其 ...

  4. SpringMVC @RequestBody请求参数在postman中的请求

    使用SpringMVC框架,controller使用参数  @RequestBody  LoginReq req   注解方式模拟http请求 需要请求header添加一个参数 设置  Header参 ...

  5. Golang之面向对象和指针

    武大郎,来十个烧饼... package main import "fmt" type Integer int //为内置的int类型增加了新方法less,面向对象写法 func ...

  6. Cook－Torrence Illumination Model 的一些数学说明

    Cook-Torrence 光照模型如下: 这个Io就是计算后最终的光强,主要是用来计算镜面反射光,漫反射和环境光的计算和Phong模型一致. F:Fresnel反射系数.主要用来说明反射光强度占入射 ...

  7. Java操作HDFS代码样例

    代码在GitHub上. 包括如下几种样例代码: 新建文件夹 删除文件/文件夹 重命名文件/文件夹 查看指定路径下的所有文件 新建文件 读文件 写文件 下载文件至本地 上传本地文件 https://gi ...

  8. SOCKET句柄泄露带来的内存灾难

    前些时候游戏莫名其妙出现大量内存泄露,我感到很诧异,当然一般情况下游戏的内存管理是极其严苛的,出现如此大量的内存泄露到底是怎么回事? 句柄滥用导致的内存泄露会多夸张呢,尤其SOCKET,在某些客户端系 ...

  9. C语言条件编译及编译预处理阶段（转）

    一.C语言由源代码生成的各阶段如下: C源程序->编译预处理->编译->优化程序->汇编程序->链接程序->可执行文件 其中 编译预处理阶段,读取c源程序,对其中的 ...

  10. marathon的高可用服务自动发现和负载均衡

    上一篇我们说谈了docker+zookeeper+mesos+marathon集群,本篇我们来谈谈marathon的集群和自动发现服务. marathon的服务自动发现和负载均衡有两种,1是mesos ...