Window.localStorage购物车实现

已于 2025-04-07 18:27:29 修改
阅读量1.3k 收藏 4
点赞数 3
CC 4.0 BY-SA版权
分类专栏： 前端 # 营销 文章标签： javascript 前端 localStorage购物车 纯前端实现购物车 js实现购物车完整API 纯js实现购物车CURD html
于 2018-04-16 17:13:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jjk_02027/article/details/79962994

-------------------------------   纯原生js + jquery  -------------------------------   

背景

       行业内企业应用，购物车不需要保存到服务器，关闭浏览器就清空购物车。

一、localStorage官方API

 Window.localStorage技术参考文档

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

二、购物车API【实现】

子功能js方法参数及示例
单个商品加入购物车myCart.addGoodgood：
{id:1, num:2, type: 1 }
商品批量加入购物车myCart.addGoodsgoods：
[{"id":"1","num":1,"type":1},
{"id":"2","num":"2","type":1}]
删除单个商品myCart.removegoodId：
1
批量删除商品myCart.removeGoodsgoodIds：
[1,3,4]
清空购物车myCart.removeAll
增减购物车某个商品的数量myCart.addGoodNum goodId=1, num=1或goodId=1, num=-2
修改购物车某个商品的数量myCart.modifyGoodNum goodId=1, num=8
查询购物车中某个商品的数量myCart.getGoodNumgoodId=1
查询购物车商品列表myCart.getGoodList
查询购物车商品ID列表myCart.getGoodIdList

三、效果图

然后上代码，打开页面可看到效果：

       注：1、由于使用了localStorage，需要有session.  所以必需把文件放到web容器后通过浏览器访问

              2、界面依赖JQuery.js

四、【实现】代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title>LocalStorage操作</title>
    <meta name="keywords" content="dandsoft daizhongde employeeNo888888">
    <meta name="description" content="author daizhongde https://blog.youkuaiyun.com/jjk_02027">
    <meta name="description" content="author 戴忠戴  QQ 413881461">
    <meta name="content-type" content="text/html; charset=UTF-8">
    

    <script src="../js/jquery-2.2.4.min.js"></script>
<style type="text/css">

</style>
<script type="text/javascript">
var myCart = {};
var myStorage = localStorage;
/* id: good dh; num: good number;  type: selfuse, jtuse, person  */
var good = {id:1, num:2, type: 1 };
var goods = [];

/**
 * judge id whether exists in cartArray 
 * @param objArray
 * @param key  id's key  eg:id
 * @param value  id's value  eg:123
 * return true: cartArray contains id key, false: not contains id key
 */
function containsKeyInArray( objArray, idkey, idvalue ){
	console.log( "containsKeyInArray: "+JSON.stringify(objArray) )
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == idvalue)
			return true;
    }
	return false;
};

/**
 * plus cart's good number which exists in cart
 * @param objArray
 * @param good  id's key  eg:id
 * @param idkey  id's value  eg:123
 * @param numkey  id's value  eg:123
 */
function plusGoodNum2Array(objArray, good, idkey, numkey){
	//
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == good[idkey] )
			objArray[i][numkey] = Number(objArray[i][numkey]) + Number(good[numkey]);
    }
	return false;

};
/** 
 * add single good to cart
 * @param good good Object 
 */
myCart.addGood = function( good ){
	console.log( "myCart.addGood: "+JSON.stringify(good) );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
// 	if( undefined == myStorage.cart || null == myStorage.cart );
// 	if( myStorage.cart ){//exist cart attribute , with cart item
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		if( !containsKeyInArray( cartArray, "id", good["id"] ) ){
			cartArray.push(good);
		}else{
			plusGoodNum2Array(cartArray, good,"id","num");
		}
		
	}else{//not exist cart attribute, no cart item
		cartArray.push(good);
	}
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
};

/**
 * good's count plus some number, minus pass negative number<br>
 * js judge, when num =1, can't minus any more.<br>
 * use page: + - operate in cart page
 * @return good's new number
 */
myCart.addGoodNum = function(goodId, num){
	console.log( "myCart.addGoodNum: goodId="+goodId+",num="+num );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
// 	if( undefined == myStorage.cart || null == myStorage.cart );
// 	if( myStorage.cart ){//exist cart attribute , with cart item
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		for(var i = 0; i < cartArray.length; i++) {
			if( cartArray[i]["id"] == goodId ){
				cartArray[i]["num"] = Number(cartArray[i]["num"]) + Number( num );
				break;
			}
	    }
	}
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
	return cartArray[i]["num"];
};

/** 
 * add multiply good to cart
 * with problem , wait for solve ........
 * @param good goods Object Array
 */
myCart.addGoods = function( goods ){
	console.log("myCart.addGoods: "+ JSON.stringify(goods) );
	console.log("myCart.addGoods:  goods.length="+  goods.length );
	var cartArray = myStorage.cart?JSON.parse( myStorage.getItem("cart") ) : [];
	try {
		
		for(var i = 0; i < goods.length; i++) {
	// 		myCart.addGood( goods[i] );
			console.log("myCart.addGoods: i="+ i );
			if( cartArray.length != 0 ){//exist cart attribute , with cart item
				console.log("myCart.addGoods: i="+ i );
				if( !containsKeyInArray( cartArray, "id",  goods[i]["id"] ) ){
					cartArray.push( goods[i]);
				}else{
					console.log("myCart.addGoods: i="+ i );
					plusGoodNum2Array(cartArray,  goods[i],"id","num");
					console.log("myCart.addGoods: i="+ i );
				}
			}else{//not exist cart attribute, no cart item
				cartArray.push( goods[i]);
			}
			console.log("myCart.addGoods: cartArray="+ JSON.stringify(cartArray) );
			console.log("myCart.addGoods: goods="+ JSON.stringify(goods)+",goods.length:"+goods.length+",i:"+i );
	    }
	
	}
	catch(err) {
	    document.getElementById("error").innerHTML = err.message;
	}
	
	myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
};
/**
 * remove a good from cart
 */
myCart.remove = function(goodId){
	console.log("myCart.remove: "+ goodId);
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	if( cartArray.length != 0  ){//exist cart attribute , with cart item.  && containsKeyInArray( cartArray, "id", goodId )
		console.log("myCart.remove: cartArray.length != 0 && containsKeyInArray( cart, \"id\", goodId ) is true");
		console.log("myCart.remove: cartArray.length:"+cartArray.length);
		for(var i = 0; i < cartArray.length; i++) {
			if( cartArray[i]["id"] == goodId ){
				cartArray.splice(i, 1);
				myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
				break;
			}
	    }
	}
	console.log("myCart.remove: cartArray.length != 0 && containsKeyInArray( cart, \"id\", goodId ) is false. like " +(cartArray.length != 0) + "&&"+ (containsKeyInArray( cart, "id", goodId )));
};
/**
 * remove multiply goods from cart
 */
myCart.removeGoods = function(goodIds){
	console.log("myCart.removeGoods: "+ JSON.stringify(goodIds) );
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	var removeflag = 0;
	if( cartArray.length != 0 ){//exist cart attribute , with cart item
		for(var i = 0; i < goodIds.length; i++) {
			console.log("myCart.removeGoods: "+ i);
// 			myCart.remove( goodIds[i] );
			for(var j = 0; j < cartArray.length; j++) {
				if( cartArray[j]["id"] == goodIds[i] ){
					cartArray.splice(j, 1);
					removeflag ++;
					break;
				}
		    }
	    }
		myStorage.setItem("cart", JSON.stringify(cartArray) ); //convert cartArray to string storage in localStorage
	}
};
/**
 * clear cart
 */
myCart.removeAll = function(){
	myStorage.removeItem("cart");
};

/* set good's num */
myCart.modifyGoodNum = function(goodId, num )
{
   	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
   	for(var i = 0; i < cartArray.length; i++) {
   		if( cartArray[i]["id"] == goodId )
   			cartArray[i]["num"]= Number(num);
       }
   	myStorage.setItem("cart", JSON.stringify(cartArray) );
   	
};
/* get good's num */
myCart.getGoodNum = function( goodId )
{
   	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
   	for(var i = 0; i < cartArray.length; i++) {
   		if( cartArray[i]["id"] == goodId )
   			return cartArray[i]["num"];
    }
   	return 0;
};
/* get good list  */
myCart.getGoodList = function( )
{
   	return myStorage.cart ? myStorage.getItem("cart") : "";
};
/* get good id list  */
myCart.getGoodIdList = function( )
{
	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
	var goodIdList = cartArray.map(function(v){return v.id;});
	return goodIdList;
};
/**
 * find other attribute's value by primary key id
 * @param objArray
 * @param key  id's key  eg:id
 * @param numKey  target value's key  eg:8
 * return target value
 */
function getAttrValueByKey( objArray, idkey,idvalue, attrName ){
	console.log( "getAttrValueByKey: "+JSON.stringify(objArray) )
	for(var i = 0; i < objArray.length; i++) {
// 		var tempObj = objArray[i];
		if( objArray[i][idkey] == idvalue)
			return objArray[i][attrName];
    }
	return "";
};


function refreshTextarea(){
	//refresh cart data
	$('#cart').val(myStorage.cart ? myStorage.getItem("cart").replace(/\}\,\{/g, decodeURI("},\n{")) : "");
	
	var goodIdList = myCart.getGoodIdList();
	//refresh goodIdList data
	$('#goodIdList').val( goodIdList );
};


function add2Storage(){
	myCart.addGood({'id':$('#addspid').val(), 'num': Number($('#spnum').val()),'type':1 } );  
	refreshTextarea();
};
function batchAdd2Cart(){
	console.log("batchAdd2Cart: "+ JSON.stringify( JSON.parse($('#goods').val()) ) );
	myCart.addGoods( JSON.parse($('#goods').val()) ); 
	refreshTextarea();
};

function batchRemoveCart(){
	console.log("batchRemoveCart: "+ JSON.stringify($('#removespidlist').val().split(',')) );
	myCart.removeGoods( $('#removespidlist').val().split(',') ); 
	refreshTextarea();
};
/* good id key enter event */
function enterKeyDown(event)
{
    if(event.keyCode==13)
    {
//     	var cartArray = myStorage.cart ? JSON.parse( myStorage.getItem("cart") ) : [];
//     	var num = getAttrValueByKey( cartArray, "id", $('#plusGoodId').val(), "num" );
    	var num = myCart.getGoodNum($('#plusGoodId').val());
    	console.log("num:"+num);
    	$('#goodNum').val( num );
	}
};
/* good number key enter event */
function enterKeyDown2(event, obj )
{
    if(event.keyCode==13)
    {
    	myCart.modifyGoodNum($('#plusGoodId').val(), Number(obj.value) );
    	refreshTextarea();
	}
};
/* good number input change event */
function goodNumChange( obj )
{
   	myCart.modifyGoodNum($('#plusGoodId').val(), Number(obj.value) );
   	refreshTextarea();
};
</script>
</head>
<body onload="refreshTextarea()">
<fieldset title="加入购物车"><legend>加入购物车</legend>
请输入商品ID：<input type="text" id="addspid" name="spid" value="1"/>
请输入购买数量：<input type="text" id="spnum" name="spnum" value="1" style="width:30px"/>
<input type="button" name="add" value="加入购物车" onclick="add2Storage()"/>

<br/><br/>
<textarea id="goods" rows="3" cols="40">
[{"id":"1","num":1,"type":1},
{"id":"2","num":"2","type":1}]
</textarea>
<input type="button" name="add" value="批量加入购物车" onclick="batchAdd2Cart()"/>
</fieldset>

<fieldset title="删除商品"><legend>删除商品</legend>
请输入商品ID：<input type="text" id="removespid" name="removespid" value="1"/>
<input type="button" name="remove" value="从购物车移除" onclick="myCart.remove( $('#removespid').val() );  refreshTextarea();"/>

<br/><br/>
请输入商品ID列表：<input type="text" id="removespidlist" name="removespidlist" value="1,2"/>*逗号分隔
<input type="button" name="remove" value="（批量）移除" onclick="batchRemoveCart()"/>

<br/><br/>
<input type="button" name="remove" value="清空购物车" onclick="myCart.removeAll();  refreshTextarea();"/>
</fieldset>


<fieldset title="修改数量"><legend>修改数量</legend>
购物车操作：请输入商品ID
<input type="text" id="plusGoodId" name="plusGoodId" value="1"  onkeydown="enterKeyDown(event)"/>
<input type="button" name="minus" value="-" onclick="myCart.addGoodNum( $('#plusGoodId').val(), -1 ); $('#goodNum').val( Number($('#goodNum').val())-1 ); refreshTextarea();" />
<input type="text" id="goodNum" name="goodNum" value="1" style="width:30px"  onchange="goodNumChange(this)" />
<!-- onkeydown="enterKeyDown2(event,this)" -->
<input type="button" name="plus" value="+" onclick="myCart.addGoodNum( $('#plusGoodId').val(), 1 );  $('#goodNum').val( Number($('#goodNum').val()) +1 ); refreshTextarea();"/>
*输入商品ID或数量后请按回车
</fieldset>

<fieldset title="查看购物车"><legend>查看购物车</legend>
	<table  border="1">
		<thead>
			<tr>
				<th>localStroage 的Cart 数据</th>
				<th>商品ID列表</th>
				<th>error</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><textarea id="cart" rows="8" cols="30"></textarea></td>
				<td><textarea id="goodIdList" rows="8" cols="30"></textarea></td>
				<td><textarea id="error" rows="8" cols="30"></textarea></td>
			</tr>
		</tbody>
	</table>
</fieldset>
</body>
</html>

附件一：localStorage基本操作

在Web开发中，localStorage 是一个非常有用的API，它允许你在用户的浏览器上存储键值对数据。这些数据在页面的会话（session）之间是持久的，除非被明确地删除。下面是一些基本的 localStorage 操作方法：

1. 设置数据

使用 localStorage.setItem(key, value) 方法来存储数据。这里的 key 是存储数据的键，value 是要存储的数据。value 必须是字符串类型，如果不是字符串，你需要先将其转换为字符串。

localStorage.setItem('username', '张三');

2. 获取数据

使用 localStorage.getItem(key) 方法来获取之前存储的数据。你需要提供存储时使用的相同的键。

let username = localStorage.getItem('username');
console.log(username); // 输出: 张三

3. 移除数据

使用 localStorage.removeItem(key) 方法来删除之前存储的数据。你需要提供要删除的项的键。

localStorage.removeItem('username');

4. 清除所有数据

使用 localStorage.clear() 方法来删除 localStorage 中的所有数据。这会清空整个存储区域。

localStorage.clear();

5. 检查键是否存在

你可以通过尝试获取该键的值，然后检查返回的 null 来判断键是否存在。或者，你可以使用 localStorage.hasOwnProperty(key) 方法。

if (localStorage.getItem('username') !== null) {
  console.log('用户名已存在');
} else {
  console.log('用户名不存在');
}

// 或者使用 hasOwnProperty 方法：
if (localStorage.hasOwnProperty('username')) {
  console.log('用户名已存在');
} else {
  console.log('用户名不存在');
}

注意事项：

  • localStorage 存储的是字符串，如果你要存储对象或数组，需要先将它们转换为JSON字符串（使用 JSON.stringify()）。获取时再使用 JSON.parse() 转换回原来的格式。

例如，存储对象：

const user = { name: '张三', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

获取对象：

const user = JSON.parse(localStorage.getItem('user'));
console.log(user); // 输出: { name: '张三', age: 30 }

  • localStorage 的大小限制通常是每个源（origin）5MB，但具体限制可能因浏览器而异。在设计应用时需要考虑这一点，避免因存储过多数据而导致问题。

  • 在某些浏览器设置中，用户可以禁用或限制 localStorage 的使用，这可能会影响你的应用功能。在设计应用时，考虑到这一点并给予用户明确的反馈是很重要的。你可以通过检查 localStorage 是否可用（例如，尝试设置一个临时项并检查是否成功）来优雅地处理这种情况。例如：

try {
  localStorage.setItem('test', 'test');
  localStorage.removeItem('test');
  console.log('LocalStorage is supported and available.');
} catch (e) {
  console.error('LocalStorage might not be available.');
}

提示：AI自动生成，仅供参考

附件二： localStorage、sessionStorage、cookie三者简介

前端浏览器本地存储的方式有三种，分别是 localStorage、sessionStorage、cookie.
localStorage:
localstorage 的生命周期是永久的，存放数据大小一般为5MB，不参加和服务的通信，不能跨浏览器使用。应用场景：历史记录、登录
sessionStorage
seesionStorage 仅在当前会话下有效，关闭页面或者浏览器后被消除。存放数据大小一般为5MB, 不能参与于服务器的通信，不能跨浏览器使用。页面之间的传值，敏感账号的一次性登录。
cookie
cookies 数据存储在浏览器，单个cookie数据不能超过4k; cookie 的信息会在 http 请求的时候携带到服务器，可在request headers中查看，不能跨浏览器使用，应用场景，判断用户是否登录过网站，保存上次登录的时间等信息，浏览计数。

区别

localStorage：内存5Mb，始终有效，在所有同源窗口中都是共享的。
sessionStorage： 内存5MB, 仅在当前浏览器窗口关闭前有效，在不同的浏览器窗口不共享。
cookie：不超过4k，设置cookie的过期时间之前一直有效，在所有同源窗口中共享。
相同：
这三者都是可以被利用来在浏览器端存储数据，而且都是字符类型的键值对。

基于localStorage的本地存储XSS
9ian1i
02-16 5068
0x00 什么是localStorageHTML5 提供了两种新的本地存储方案，sessionStorage和localStorage，统称WebStorage。 顾名思义： sessionStorage 是针对session的数据存储，关闭窗口后删除。 localStorage 是一个本地的没有时间限制的数据存储。它们同样遵循SOP。0x01 什么是基于localStorage的XSS现在越
JavaScript localStorage本地存储的简单使用
AKGWSB 's blog
07-17 2207
在web编程中，经常要持久存储用户的一些信息，比如购物车，收藏夹，设置等待信息 之前的博客已经提到有两种存储用户信息的方法，cookie和session session存储在服务端，会带来服务器内存开销，主要存储用户不能篡改的敏感数据 cookie存储在本地，每次访问站点都带上cookie，会带来额外带宽的开销 上述两种方式都是【要和服务器进行数据交换】的情况下，我们会采用。 可是如果一种应用不需要和服务器进行数据交互，比如网页的偏好设置（字体大小，语言，界面样式等），我们希望用户本地自己保存这些偏好设
localStorage实现本地购物车
04-17
背景： 行业内企业应用，购物车不需要保存到服务器，关闭浏览器就清空购物车。 实现方法： 单个商品加入购物车｜ 商品批量加入购物车｜ 删除单个商品｜ 批量删除商品｜ 清空购物车｜ 增减购物车某个商品的数量｜ 修改购物车某个商品的数量｜ 查询购物车中某个商品的数量｜ 查询购物车商品列表｜ 查询购物车商品ID列表｜
基于jQuery的localStorage购物车.zip
02-24
基于jQuery3.4.1版本的localStorage购物车,注意将jQuery和html放在同一目录下
JavaScript基础-window.localStorage
最新发布
qq_51626500的博客
07-06 426
JavaScript基础-window.localStorage
基于js，localStorage的商品列表和购物车案例
ycccyc的博客
09-29 1931
案例大致可以分为两个部分：商品列表的实现和购物车的实现 商品列表 商品是通过构造json数据实现的。具体的json数据如下： 其中的图片需要大家自行更换。 [ { "id": 1, "src": "http://img12.360buyimg.com/n7/jfs/t1/4136/40/6201/250287/5ba1f333E745fc8b9/b34c5ccc4c4fd548.jp...
localStorage保存加入购物车信息
weixin_44476265的博客
12-03 834
localStorage属性 JavaScript存储对象（即前端使用） localStorage和sessionStorage允许在浏览器中存储key/value对的数据 loacalStorage用户长久保存整个网站的数据，保存的数据没有过期时间，直接手动删除 localStorage属性为只读 浏览器支持：ie8,谷歌4.0，火狐3.5 语法：window.localStorage 保存数据：localStorage.setItem(“key”,“value”); 读取数据：localStorage.
使用LocalStorage 实现购物车数据永久存储
XYXYYDD的博客
09-13 411
1.定义一个 setLocalCartList 方法用于设置 cartList 里面的数据，数据存储一般要JSON格式，所以进行转化，本地存储的 cartList 数据等于 vuex里的 cartList 数据 只要每个数据改变都调用一下这个方法 2.定义一个getLocaCartList 方法用于获取本地存储，没有则返回空对象 vuex中的 cartList 等于本地存储的cartList数据 ...
购物车数据加加减减完了页面不能实时更新必须要手动刷新 const shop_list = JSON.parse( window.localStorage.getItem("shop_list") || "[]" ) as TypeList[]; const jian = (obj: TypeList) => { const index = shop_list.findIndex((item) => item.id === obj.id); console.log(index); if (shop_list[index].num === 1) { (shop_list[index].num = 1), alert("最少为一个"); } else { shop_list[index].num--; } window.localStorage.setItem("shop_list", JSON.stringify(shop_list)); };
07-08
根据你提供的代码，购物车数据的加减操作已经实现，但页面不能实时更新，需要手动刷新才能看到最新的数据。要实现实时更新，你可以在数据发生变化的地方调用一个更新页面的函数。例如，在 `jian` 函数中，在 `window...
我数据已经存到本地了 但是这个代码拿不到数据<template> <div> <van-card :thumb="shop_list.img" /> </div> </template> <script lang="ts" setup> interface TypeList { name: string; age: number; id: string | number; title: number; } const shop_list = window.localStorage.getItem("shop_list") || []; </script> <style></style>
07-08
由于您在初始化 `shop_list` 时使用了逻辑或运算符 `||`，当 `window.localStorage.getItem("shop_list")` 返回 `null` 或 `undefined` 时，将会赋值空数组给 `shop_list`。这将导致 `shop_list` 的类型被推断为一个...
JavaScript基础之localStorage以及简单实现购物车功能
qq_37016677的博客
03-27 1704
1.localStorage是什么 localStorage是HTML5里新加入的新特性，这个是作为一种本地存储功能来使用的，解决了cookit只有4kb的存储空间导致空间不足的问题，在浏览器当中localStorage的大小一般为5M，当然在不同的浏览器当中大小也不同。 2.购物车功能的实现 1.实现购物车的“增删改查”功能 ------------------------------封...
sessionStorage存储数据（对象、数组、字符串）
热门推荐
chongchong1325的博客
09-28 1万+
在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储 sessionStorage 方法 sessionStorage 方法针对一个 session 进行数据存储。在关闭窗口或标签页之后，数据会被删除。 sessio
window.localStorage
zhuchuji的博客
08-24 830
window.localStorage
window.localStorage的用法
孤云博客
03-28 4361
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。 from：https://blog.csdn.net/weixin_40279966/article/details/79176520 一、什么是localStorage、sessionStorage 在HTM...
window.localStorage.setItem的理解与使用
weixin_40029679的博客
05-18 5765
最近接触的一个小项目中频繁看到一个新的面孔： changeTheme () { dispatch({ type: 'app/switchTheme' }) }, changeOpenKeys (openKeys) { window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys)) dispatch({ type: 'app/handleNavOpenKeys',
H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）
Vicki_的博客
03-14 622
H5本地存储详细使用教程（localStorage + JSON数据存储应用框架）原文地址：http://www.cnblogs.com/gaosheng-221/p/7161589.htmlH5本地存储有两个API，一个是Web Storage，还有一个是Web SQL。不管是哪一个，都是基于JavaScript语言来使用，接下来我就教你怎么使用H5本地存储，本文篇幅较大，js代码较多，请耐心阅...
Window localStorage 属性与Window sessionStorage 属性（Js将数据存储在浏览器端）
黄瓜炒鸡蛋的博客
07-11 551
Window localStorage 属性与Window sessionStorage 属性，将数据存储在浏览器端，实现浏览器全局变量，轻松解决界面传值问题
在vue中实现localStorage
感恩、奋进、自信
05-08 1万+
在vue中实现localStorage的思路：对window.localStorage[key]对象进行封装，这样就可以实现模块化的思想（实现window.sessionStorage的思想一样） 如图1是在文件store.js中对localStorage的封装： 完整的代码如下： //保存数据 export function saveToLocal(id, key, value) {...
在HTML5中使用localStorage存值取值以及存取JSON
Denghejing的专栏
08-17 5106
我要在本地客户端使用localStorage存储配置的一些参数信息，然后在另外一个页面进行调取。               layer.config({             skin: 'layer-ext-seaning',             extend: 'skin/seaning/style.css'         });         //清空lo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞火流星02027

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值