欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js+cookie實(shí)現(xiàn)購(gòu)物車(chē)功能的方法分析

 更新時(shí)間:2017年12月21日 14:10:31   作者:jqshashou  
這篇文章主要介紹了原生js+cookie實(shí)現(xiàn)購(gòu)物車(chē)功能的方法,結(jié)合實(shí)例形式分析了javascript結(jié)合cookie存儲(chǔ)實(shí)現(xiàn)購(gòu)物車(chē)功能的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了原生js+cookie實(shí)現(xiàn)購(gòu)物車(chē)功能的方法。分享給大家供大家參考,具體如下:

這里使用js+cookie實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車(chē)功能。

首先是簡(jiǎn)單的HTML結(jié)構(gòu),只是為了演示下功能。

<ul>
  <li><span>a0001</span><span>shdfi</span><span>¥98.00</span>
<input type="button" value="加入購(gòu)物車(chē)"></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>¥698.00</span>
<input type="button" value="加入購(gòu)物車(chē)"></li>
  <li><span>a0003</span><span>dfdfi</span><span>¥988.00</span>
<input type="button" value="加入購(gòu)物車(chē)"></li>
  <li><span>a0004</span><span>sssi</span><span>¥998.00</span>
<input type="button" value="加入購(gòu)物車(chē)"></li>
  <li><span>a0005</span><span>yyu</span><span>¥98.00</span>
<input type="button" value="加入購(gòu)物車(chē)"></li>
  <li><span>a0006</span><span>sheri</span><span>¥598.00</span>
<input type="button" value="加入購(gòu)物車(chē)"></li>
  <li><span>a0007</span><span>dsfcdhdfi</span><span>¥498.00</span>
<input type="button" value="加入購(gòu)物車(chē)"></li>
  <li><span>sbnm,</span><span>¥698.00</span><input type="button" value="加
入購(gòu)物車(chē)"></li>
</ul>
<a href="購(gòu)物車(chē)查看頁(yè)面.html" rel="external nofollow" >查看購(gòu)物車(chē)</a>

下面的代碼是實(shí)現(xiàn)點(diǎn)擊添加按鈕時(shí),把商品信息加入cookie,注釋比較詳細(xì),在代碼中我把操作cookie(set和get封裝為cookieUtil對(duì)象的方法,方便調(diào)用)。

<script>
    //JSON.parse
    //JSON.stringify
    onload = function () {
      var input = document.getElementsByTagName("input");
      //判斷是否存在cookie,或是第一次添加
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //遍歷給每個(gè)input元素添加點(diǎn)擊事件
      for (var j = 0; j < input.length; j++) {
        input[j].onclick = function () {
          var g_id = this.parentNode.children[0].innerHTML;
          var g_name = this.parentNode.children[1].innerHTML;
          var g_price = this.parentNode.children[2].innerHTML;
          //遍歷cookie,判斷是否已經(jīng)存在該商品
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //已經(jīng)存在該商品,商品數(shù)量+1
              arr[i].num++;
              break;//立即結(jié)束遍歷
            }
          }
          //如果i的值與arr長(zhǎng)度相同,則證明遍歷結(jié)束也沒(méi)有進(jìn)入過(guò)if條件語(yǔ)句,
          //cookie中不存在該商品,新建一個(gè)商品對(duì)象,并添加到數(shù)組中
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //把更新后的數(shù)組序列化為JSON字符串,保存到cookie中
          var date = new Date();
          date.setDate(date.getDate() + 10); //保存十天
  //保存cookie
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

這里是封裝的cookieUtil對(duì)象

//cookie Util
var cookieUtil = {
  //添加cookie
  setCookie: function (name, value, expires) {
    var cookieText = encodeURIComponent(name) + "=" + 
encodeURIComponent(value);
    if (expires && expires instanceof Date) {
      cookieText += "; expires=" + expires;
    }
    // if (domain) {
    //   cookieText += "; domain=" + domain;
    // }
    document.cookie = cookieText;
  },
  //獲取cookie
  getCookie: function (name) {
    var cookieText = decodeURIComponent(document.cookie);
    var cookieArr = cookieText.split("; ");
    for (var i = 0; i < cookieArr.length; i++) {
      var arr = cookieArr[i].split("=");
      if (arr[0] == name) {
        return arr[1];
      }
    }
    return null;
  },
  //刪除cookie
  unsetCookie: function (name) {
    document.cookie = encodeURIComponent(name) + "=; expires=" + 
new Date(0);
  }
};

上面的代碼都非常好理解,下面這個(gè)頁(yè)面就是把cookie中的商品信息取出來(lái)。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查看購(gòu)物車(chē)頁(yè)面</title>
  <script src="../Utils.js"></script>
  <script>
    onload = function () {
      var ul = document.getElementsByTagName("ul")[0];
      var arr = cookieUtil.getCookie("car");
      if (arr) {
        arr = JSON.parse(arr);
        //存在cookie則取出來(lái)顯示到頁(yè)面上
        for (var i = 0; i < arr.length; i++) {
          //每個(gè)數(shù)組元素對(duì)應(yīng)的是一個(gè)商品對(duì)象
          var goods = arr[i];
          var li = document.createElement("li");
          li.innerHTML = "商品名稱(chēng):" + goods.g_name + ",商品數(shù)
量" + goods.num + ",商品單價(jià):" + goods.g_price;
          ul.appendChild(li);
        }
      } else {
        alert("購(gòu)物車(chē)中還不存在商品!");
      }
    }
  </script>
</head>
<body>
<ul></ul>
</body>
</html>

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題:《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • Javascript ES6中對(duì)象類(lèi)型Sets的介紹與使用詳解

    Javascript ES6中對(duì)象類(lèi)型Sets的介紹與使用詳解

    這篇文章主要給大家介紹了關(guān)于Javascript ES6中Sets的介紹與使用的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-07-07
  • 微信小程序中做用戶(hù)登錄與登錄態(tài)維護(hù)的實(shí)現(xiàn)詳解

    微信小程序中做用戶(hù)登錄與登錄態(tài)維護(hù)的實(shí)現(xiàn)詳解

    微信小程序的運(yùn)行環(huán)境不是在瀏覽器下運(yùn)行的。所以不能以cookie來(lái)維護(hù)登錄態(tài)。下面這篇文章主要給大家介紹了微信小程序中如何做用戶(hù)登錄與登錄態(tài)維護(hù)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考學(xué)習(xí)。
    2017-05-05
  • 微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析

    微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析

    這篇文章主要介紹了微信小程序列表時(shí)間戳轉(zhuǎn)換實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-10-10
  • 原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例

    原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例

    下面小編就為大家?guī)?lái)一篇原生js實(shí)現(xiàn)仿window10系統(tǒng)日歷效果的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-10-10
  • uni-app實(shí)現(xiàn)全局水印示例詳解

    uni-app實(shí)現(xiàn)全局水印示例詳解

    這篇文章主要為大家介紹了uni-app實(shí)現(xiàn)全局水印示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-07-07
  • JavaScript獲取當(dāng)前頁(yè)面上的指定對(duì)象示例代碼

    JavaScript獲取當(dāng)前頁(yè)面上的指定對(duì)象示例代碼

    這篇文章主要介紹了JavaScript獲取當(dāng)前頁(yè)面上指定對(duì)象的方法,需要的朋友可以參考下
    2014-02-02
  • 首頁(yè)圖片漂浮效果示例代碼

    首頁(yè)圖片漂浮效果示例代碼

    圖片漂浮效果想必大家都有見(jiàn)到過(guò)吧,一般都是通過(guò)js來(lái)實(shí)現(xiàn)的,下面為大家介紹的這個(gè)示例也是通過(guò)js實(shí)現(xiàn)的
    2014-06-06
  • JavaScript判斷數(shù)組類(lèi)型的方法

    JavaScript判斷數(shù)組類(lèi)型的方法

    這篇文章主要介紹了JavaScript判斷數(shù)組類(lèi)型的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-10-10
  • 前端處理二進(jìn)制流文件導(dǎo)出為excel表代碼示例

    前端處理二進(jìn)制流文件導(dǎo)出為excel表代碼示例

    這篇文章主要給大家介紹了關(guān)于前端處理二進(jìn)制流文件導(dǎo)出為excel表的相關(guān)資料,后臺(tái)管理系統(tǒng),常會(huì)出現(xiàn)導(dǎo)出excel表格功能,需要的朋友可以參考下
    2023-08-08
  • 淺談鴻蒙 JavaScript GUI 技術(shù)棧

    淺談鴻蒙 JavaScript GUI 技術(shù)棧

    眾所周知,剛剛開(kāi)源的「鴻蒙 2.0」以 JavaScript 作為 IoT 應(yīng)用開(kāi)發(fā)的框架語(yǔ)言。作為科普,這篇文章不會(huì)拿著放大鏡找出代碼中的槽點(diǎn)來(lái)吹毛求疵,而是希望通俗地講清楚它所支持的 GUI 到底是怎么一回事。
    2020-09-09

最新評(píng)論