文档章节

localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

深圳大道
 深圳大道
发布于 2016/12/29 15:38
字数 714
阅读 7
收藏 0
localStorage.setItem("key","value");//存储变量名为key,值为value的变量
 
localStorage.key = "value"//存储变量名为key,值为value的变量
 
localStorage.getItem("key");//获取存储的变量key的值www.it165.net
 
localStorage.key;//获取存储的变量key的值
 
localStorage.removeItem("key")//删除变量名为key的存储变量
//以上即为localStorage调用的方法。下面介绍存储JSON对象的方法。
var students = 
{
	liyang:{name:"liyang",age:17},

	lilei:{name:"lilei",age:18}

}//要存储的JSON对象


students = JSON.stringify(students);//将JSON对象转化成字符串

localStorage.setItem("students",students);//用localStorage保存转化好的的字符串
//上面即可保存JSON对象,接下来我们在要使用的时候再将存储好的students变量取回
 
var students = localStorage.getItem("students");//取回students变量
 
students = JSON.parse(students);//把字符串转换成JSON对象
 
//以上即可得到存储的students的JSON对象了
utils = {
    setParam : function (name,value){
        localStorage.setItem(name,value)
    },
    getParam : function(name){
        return localStorage.getItem(name)
    }
}

product={
    id:0,
    name:"",
    num:0,
    price:0.00
};
orderdetail={
    username:"",
    phone:"",
    address:"",
    zipcode:"",
    totalNumber:0,
    totalAmount:0.00    
}
cart = {
    //向购物车中添加商品
    addproduct: function (product) {
        var ShoppingCart = utils.getParam("ShoppingCart");
        if (ShoppingCart == null || ShoppingCart == "") {
            //第一次加入商品
            var jsonstr = { "productlist": [{ "id": product.id, "name": product.name, "num": product.num, "price": product.price}], "totalNumber": product.num, "totalAmount": (product.price * product.num) };
            utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr));
        } else {
            var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));
            var productlist = jsonstr.productlist;
            var result = false;
            //查找购物车中是否有该商品
            for (var i in productlist) {
                if (productlist[i].id == product.id) {
                    productlist[i].num = parseInt(productlist[i].num) + parseInt(product.num);
                    result = true;
                }
            }
            if (!result) {
                //没有该商品就直接加进去
                productlist.push({ "id": product.id, "name": product.name, "num": product.num, "price": product.price });
            }
            //重新计算总价
            jsonstr.totalNumber = parseInt(jsonstr.totalNumber) + parseInt(product.num);
            jsonstr.totalAmount = parseFloat(jsonstr.totalAmount) + (parseInt(product.num) * parseFloat(product.price));
            orderdetail.totalNumber = jsonstr.totalNumber;
            orderdetail.totalAmount = jsonstr.totalAmount;
            //保存购物车
            utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr));
        }
    },
    //修改给买商品数量
    updateproductnum: function (id, num) {
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));
        var productlist = jsonstr.productlist;

        for (var i in productlist) {
            if (productlist[i].id == id) {
                jsonstr.totalNumber = parseInt(jsonstr.totalNumber) + (parseInt(num) - parseInt(productlist[i].num));
                jsonstr.totalAmount = parseFloat(jsonstr.totalAmount) + ((parseInt(num) * parseFloat(productlist[i].price)) - parseInt(productlist[i].num) * parseFloat(productlist[i].price));
                productlist[i].num = parseInt(num);
                orderdetail.totalNumber = jsonstr.totalNumber;
                orderdetail.totalAmount = jsonstr.totalAmount;
                utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr));
                return;
            }
        }
    },
    //获取购物车中的所有商品
    getproductlist: function () {
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));
        var productlist = jsonstr.productlist;
        orderdetail.totalNumber = jsonstr.totalNumber;
        orderdetail.totalAmount = jsonstr.totalAmount;
        return productlist;
    },
    //判断购物车中是否存在商品
    existproduct: function (id) {
        var result = false;
        var ShoppingCart = utils.getParam("ShoppingCart");
        if (ShoppingCart != null) {
            var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));
            var productlist = jsonstr.productlist;
            for (var i in productlist) {
                if (productlist[i].id == id) {
                    result = true;
                }
            }
        }
        return result;
    },
    //删除购物车中商品
    deleteproduct: function (id) {
        var ShoppingCart = utils.getParam("ShoppingCart");
        var jsonstr = JSON.parse(ShoppingCart.substr(1, ShoppingCart.length));
        var productlist = jsonstr.productlist;
        var list = [];
        for (var i in productlist) {
            if (productlist[i].id == id) {
                jsonstr.totalNumber = parseInt(jsonstr.totalNumber) - parseInt(productlist[i].num);
                jsonstr.totalAmount = parseFloat(jsonstr.totalAmount) - parseInt(productlist[i].num) * parseFloat(productlist[i].price);
            } else {
                list.push(productlist[i]);
            }
        }
        jsonstr.productlist = list;
        orderdetail.totalNumber = jsonstr.totalNumber;
        orderdetail.totalAmount = jsonstr.totalAmount;
        utils.setParam("ShoppingCart", "'" + JSON.stringify(jsonstr));
    }
};
//上面的基于html5 localStorage的购物车JS脚本使用方法
var product =
{
	'id': id,        //属性名用引号括起来,属性间由逗号隔开
	'name': 'hhh',
	'num':jq('#text-4').val(),
	'price':199.9
};
//商品加入到购物车
cart.addproduct(product);
var productlist=cart.getproductlist();//取出购物车商品
alert('', '商品:'+productlist[0].id+' '+productlist[0].name+' '+productlist[0].num+' '+productlist[0].price, '确定');

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/45534253

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
HTML5的五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie、WebStorage、IndexedDB以及FileSystem四种本地离线存储...

xhload3d
2015/11/08
0
0
HTML5 Web 客户端五种离线存储方式汇总

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie、WebStorage、IndexedDB以及FileSystem四种本地离线存储...

xhload3d
2014/12/22
0
0
HTML5五种客户端离线存储方案

最近折腾HTML5游戏需要离线存储功能,便把目前可用的几种HTML5存储方式研究了下,基于HT for Web写了个综合的实例,分别利用了Cookie、WebStorage、IndexedDB以及FileSystem四种本地离线存储...

xhload3d
2015/11/06
0
0
本地存储—localStorage(HTML5)

localStorage简介 今夜死活睡不着,决定整理下最近搞得localStorage…… 先简单说下阐述下:localStorage 规范:http://dev.w3.org/html5/webstorage/ localStorage用于持久化的本地存储,除...

郏高阳
2013/01/03
0
11
Smarge——基于HTML5 localStorage的key-value缓存框架

缓存是任何一个Web程序都需要重视的内容。受到Redis的启发,我想到开发一个基于HTML5 localStorage的key-value缓存框架,做了一些尝试之后,便有了Smarge这样一个产物。 大家都知道,HTML5的...

crazymus
2015/08/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Class 文件结构

https://www.cnblogs.com/honghuzidelaoren/p/3622021.html

Java搬砖工程师
10分钟前
0
0
未分类资料

$ Inside the Linux Kernel 与知乎出产 一张漫画看懂Linux系统结构

十万猛虎下画山
10分钟前
0
0
Android人脸识别Demo竖屏YUV方向调整和图片保存

本博客包含三个常用方法,用于盛开Android版人脸识别Demo中竖屏使用时送入yuv数据,但一直无法识别的情况。 1.首先可以尝试顺时针旋转90°或270°,然后送入识别SDK。 2.旋转方向后依然无法识...

是哇兴哥棒棒哒
14分钟前
0
0
选择阿里云数据库HBase版十大理由

根据Gartner的预计,全球非关系型数据库(NoSQL)在2020~2022预计保持在30%左右高速增长,远高于数据库整体市场。 阿里云数据库HBase版也是踏着技术发展的节奏,伴随着NoSQL和大数据技术的兴...

阿里云云栖社区
26分钟前
0
0
平滑与滤波

五种常见的平滑滤波器: (1)方框型滤波器: 顾名思义,方框型滤波器就是用一个方框型的kernel跟二维图像进行卷积,其核定义如下: kernel= 其中, a = 1 当该滤波器非归一化滤波器 (1) a=...

yepanl
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部