localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
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, '确定');

localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车的更多相关文章
- Jmeter的JDBC Request,sql参数化及返回值取值
1.JDBC Request面板 Variable Name:数据库连接池的名字,需要与JDBC Connection Configuration的Variable Name Bound Pool名字 ...
- js localStorage 设置和取值
定义 Storage 对象,对象有get(取值), set(设置), add(加入新值)三个方法 const Storage = {} Storage.get = function (name) { ...
- dedecms--自定义session存值取值
最近在用用dedecms开发项目,开发项目中遇到需要通过session存储信息在其他页面调取使用,但是对dedecms里面自带的session存储使用不好,我需要存储的是用户登录的时候信息,于是我就使 ...
- 【记录】【java】反射设值取值
1.设值 /** * 根据属性名设置属性值 * * @param fieldName * @param object * @return */ public boolean setFieldValue ...
- localStorage存、取数组
localStorage存储数组时需要先使用JSON.stringify()转成字符串,取的时候再字符串转数组JSON.parse(). var arr=[1,2,3,4]; localStorage ...
- Vuex的同步异步存值取值
1. vue中各个组件之间传值 1.父子组件 父组件-->子组件,通过子组件的自定义属性:props 子组件-->父组件,通过自定义事件:this.$emit('事件名',参数1,参数2, ...
- sessionStorage二种存值取值的方法
//方法一 sessionStorage.setItem('id1','这是一个测试id1'); //存入一个值key:value console.log(sessionStorage.getItem ...
- Wrapped的返回值取值
Bared Wrapped using Newtonsoft.Json; using Newtonsoft.Json.Linq; string str = JsonConvert.Serial ...
- 基于html5 localStorage , web SQL, websocket的简单聊天程序
new function() { var ws = null; var connected = false; var serverUrl; var connectionStatus; var send ...
随机推荐
- 小程序脚本语言WXS,你想要的都在这里了
WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...
- Android学习记录:Paint,Canvas和Bitmap
在Java中,利用过双缓冲技术,先将画笔画在内存上,再转化为图片,调出来. 当画的东西过多造成处理不过来时,双缓冲技术将防止闪屏. 在Paint方法下,我们这样写: BufferedImage tmp ...
- 软工+C(2017第8期) 提问与回复
// 上一篇:野生程序员 // 下一篇:助教指南 在线上博客教学里引入了第三方助教,助教在每次作业期间尽力完成"消灭零点评"的目标.然而紧接而来的问题是:学生对博客作业点评的回复率 ...
- 个人作业3——(Alpha阶段)
一.alpha 过程总结 1.这学期的软件工程作业,由于各种事情冲突和时间安排问题,前期并没有太多时间去好好应对,中途有很多次都想放弃.但最后还是咬咬牙在同学的帮助下完成了一些基本任务,在这门课程开始 ...
- 【Alpha】Daily Scrum Meeting——Day6
站立式会议照片 1.本次会议为第五次Meeting会议: 2.本次会议在上午大课间09:40,在禹州楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 燃尽图 每个人的工作分配 成 ...
- 学号:201521123116 《java程序设计》第六周学习总结
1. 本章学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2.书面作业 1.1.Object对象中的clone方法是 ...
- 201521123101 《Java程序设计》第5周学习总结
1. 本周学习总结 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能 ...
- Python[小甲鱼005Python的数据类型]
一.数值类型 整形 布尔类型 True 和 False 即1和0 浮点型 e记法 e ,例如 1.5e11 = 150000000000 ...
- 201521123088 《Java程序设计》第14周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名)在自己建立的数据库上执行常见SQL语句(截图) 2. ...
- 201521123048 《java程序设计》 第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...