javascript的webstorage数据存储问题，不能直接存undefined

已于 2023-12-30 20:47:41 修改
阅读量186 收藏
点赞数
分类专栏： 开发中遇到的问题 文章标签： javascript sessionStorage
于 2023-10-31 20:29:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/heyl163_/article/details/134148070
版权
文章讲述了作者在使用easyui表格进行单元格编辑时遇到的问题，即点击修改按钮无响应。问题在于存储的editingId值为字符串undefined而非真正的undefined。文章提供了两种解决方案：存储空字符串或从localStorage中删除数据。
摘要由CSDN通过智能技术生成

这篇文章分享一下自己使用sessionStorage遇到的一个小问题，以后遇到要避坑。

需求是easyui表格的单元格编辑，点击保存的时候会结束当前行的编辑，然后修改editingId（当前编辑行记录的ID）。

目录

一、待解决问题

二、完整的页面代码

三、具体业务逻辑

添加数据

保存数据

编辑数据

四、问题分析

五、问题解决

一、待解决问题

如图，点击修改按钮时无响应，也没有报错。

二、完整的页面代码

menu_list.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="/css/themes/icon.css"/>
		<link rel="stylesheet" href="/css/themes/default/easyui.css" />
		<title>系统管理>>菜单列表</title>
		<script src="/js/public/jquery.min.js"></script>
		<script src="/js/easyui/jquery.easyui.min.js"></script>
		<script src="/js/easyui/easyui-lang-zh_CN.js"></script>
		<script src="/js/public/util.js"></script>
		<script src="/js/public/public.js"></script>
		<script src="/js/public/sessionStorage.js"></script>
		<script src="/js/menu_list.js"></script>
	</head>
	
	<body>
		<div>
			<a href="javascript:" class="easyui-linkbutton" onclick="insert()">添加</a>
			<a href="javascript:" class="easyui-linkbutton" onclick="edit()">修改</a>
			<a href="javascript:" class="easyui-linkbutton" onclick="save()">保存</a>
			<a href="javascript:" class="easyui-linkbutton" onclick="cancel()">取消</a>
			<a href="javascript:" class="easyui-linkbutton" onclick="expandAll()">展开全部</a>
			<a href="javascript:" class="easyui-linkbutton" onclick="collapseAll()">折叠全部</a>
		</div>

		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="append()" data-options="iconCls:'icon-add'">添加</div>
			<div onclick="removeIt()" data-options="iconCls:'icon-remove'">删除</div>
			<div class="menu-sep"></div>
			<div onclick="collapse()">折叠</div>
			<div onclick="expand()">展开</div>
		</div>
	
		<table id="menu_treegrid"></table>
	</body>
</html>

menu_list.js

let parentId;
let data = {
	id: "",
	name: "xxx",
	url: "",
	icon: "icon-xxx"
};

/**
 * 添加
 */
function insert() {
	let menuId = new Date().getTime();
	let treegrid = $("#menu_treegrid");

	treegrid.treegrid("append",{
		data: [{
			id: menuId,
			name: "xxx",
			url: "/html/xxx",
			icon: "icon-xxx"
		}]
	});

	// 保存editingId到sessionStorage
	storage("editingId", menuId);
	
	// 开启行编辑
	treegrid.treegrid("beginEdit", menuId);
}

/**
 * 修改
 */
function edit() {
	let editingId = getStorage("editingId");

	console.log(editingId);

	if (editingId) {
		$("#menu_treegrid").treegrid("select", editingId);
	} else {
		let row = $("#menu_treegrid").treegrid("getSelected");

		console.log("开始编辑行：");
		console.log(row);

		if (row) {
			storage("editingId", row.id);

			$("#menu_treegrid").treegrid("beginEdit", row.id);
		}
	}
}

/**
 * 保存
 */
function save() {
	let editingId = getStorage("editingId");

	if (editingId) {
		let treegrid = $("#menu_treegrid");

		if (editingId) {
			// 只有结束编辑才能获取到最新的值
			treegrid.treegrid("endEdit", editingId);

			let postData = {
				id: editingId,
				name: data.name,
				url: data.url,
				icon: data.icon,
				parentId: parentId
			};

			console.log(postData);
			storage("editingId", undefined);

			// post("/menu/updateById", postData, function () {
			// 	storage("editingId", undefined);
			// }, error);
		}
	}
}

/**
 * 取消
 */
function cancel() {
	let editingId = getStorage("editingId");

	if (editingId) {
		$("#menu_treegrid").treegrid("cancelEdit", editingId);

		storage("editingId", undefined);
	}
}

/**
 * 折叠全部
 */
function collapseAll() {
	$("#menu_treegrid").treegrid("collapseAll");
}

/**
 * 展开全部
 */
function expandAll() {
	$("#menu_treegrid").treegrid("expandAll");
}

/**
 * 添加
 */
function append() {
	let menuId = new Date().getTime();
	let treegrid = $("#menu_treegrid");
	let node = treegrid.treegrid("getSelected");

	parentId = node.id;
	storage("editingId", menuId);

	treegrid.treegrid("append",{
		parent: node.id,
		data: [{
			id: menuId,
			name: "xxx",
			url: "",
			icon: "icon-xxx"
		}]
	});

	let editingId = getStorage("editingId");

	treegrid.treegrid("beginEdit", editingId);
}

/**
 * 删除
 */
function removeIt() {
	let node = $("#menu_treegrid").treegrid("getSelected");

	if (node) {
		$("#menu_treegrid").treegrid("remove", node.id);
	}
}

/**
 * 折叠
 */
function collapse() {
	let node = $("#menu_treegrid").treegrid("getSelected");

	if (node) {
		$("#menu_treegrid").treegrid("collapse", node.id);
	}
}

/**
 * 展开
 */
function expand() {
	let node = $("#menu_treegrid").treegrid("getSelected");
	
	if (node) {
		$("#menu_treegrid").treegrid("expand", node.id);
	}
}

$(document).ready(function() {
	$("#menu_treegrid").treegrid({
		url: "/menu/listTreeGrid",
		method: "get",
		idField: "id",
		treeField: "name",
		fitColumns: true,
		pagination: true,
		pageSize: 10,
		pageList: [10, 20, 50, 100],
		columns:[[
			{title: "菜单编号", field: "id", hidden: true},
			{title: "菜单名称", field: "name", align: "left", editor: "textbox", width: 100},
			{title: "图标样式", field: "icon", align: "left", editor: "textbox", width: 100},
			{title: "页面地址", field: "url", align: "left", editor: "textbox", width: 200,
				formatter: function(value) {
					if (value) {
						return "<a href='" + value + "'>" + value + "</a>";
					} else {
						return "<div>/</div>";
					}
				}
			}
		]],
		onAfterEdit: function (row, changes) {
			console.log(changes);

			data = {
				id: row.id,
				name: row.name ? row.name : changes.name,
				url: row.url ? row.url : changes.url,
				icon: row.icon ? row.icon : changes.icon
			};;
		},
		onContextMenu: function (e, row) {
			e.preventDefault();

			$(this).treegrid("select", row.id);

			$("#mm").menu("show",{
				left: e.pageX,
				top: e.pageY
			});
		}
	}).treegrid("clientPaging");

});

(function($) {
	function pagerFilter(data) {
		if ($.isArray(data)) {    // is array
			data = {
				total: data.length,
				rows: data
			}
		}

		let dg = $(this);
		let state = dg.data("treegrid");
		let opts = dg.treegrid("options");
		let pager = dg.treegrid("getPager");

		pager.pagination({
			onSelectPage:function(pageNum, pageSize) {
				opts.pageNumber = pageNum;
				opts.pageSize = pageSize;

				pager.pagination("refresh",{
					pageNumber:pageNum,
					pageSize:pageSize
				});
				dg.treegrid("loadData",state.originalRows);
			}
		});

		if (!state.originalRows){
			state.originalRows = data.rows;
		}

		let topRows = [];
		let childRows = [];

		$.map(state.originalRows, function(row){
			row._parentId ? childRows.push(row) : topRows.push(row);
		});

		data.total = topRows.length;

		let start = (opts.pageNumber-1)*parseInt(opts.pageSize);
		let end = start + parseInt(opts.pageSize);

		data.rows = $.extend(true,[],topRows.slice(start, end).concat(childRows));

		return data;
	}

	let appendMethod = $.fn.treegrid.methods.append;
	let loadDataMethod = $.fn.treegrid.methods.loadData;

	$.extend($.fn.treegrid.methods, {
		clientPaging: function(jq) {
			return jq.each(function() {
				let state = $(this).data("treegrid");
				let opts = state.options;
				opts.loadFilter = pagerFilter;
				let onBeforeLoad = opts.onBeforeLoad;

				opts.onBeforeLoad = function(row,param) {
					state.originalRows = null;
					onBeforeLoad.call(this, row, param);
				}
				$(this).treegrid("loadData", state.data);
				$(this).treegrid("reload");
			});
		},
		loadData: function(jq, data) {
			jq.each(function() {
				$(this).data("treegrid").originalRows = null;
			});

			return loadDataMethod.call($.fn.treegrid.methods, jq, data);
		},
		append: function(jq, param) {
			return jq.each(function() {
				let state = $(this).data("treegrid");

				if (state.options.loadFilter == pagerFilter){
					$.map(param.data, function(row) {
						row._parentId = row._parentId || param.parent;
						state.originalRows.push(row);
					});
					$(this).treegrid("loadData", state.originalRows);
				} else {
					appendMethod.call($.fn.treegrid.methods, jq, param);
				}
			})
		}
	});
})(jQuery);

三、具体业务逻辑

添加数据

当点击添加按钮的时候，会在表格末尾添加一行记录，并开启行编辑，使用了sessionStorage保存正在编辑的行数据的ID。

/**
 * 添加
 */
function insert() {
	let menuId = new Date().getTime();
	let treegrid = $("#menu_treegrid");

	treegrid.treegrid("append",{
		data: [{
			id: menuId,
			name: "xxx",
			url: "/html/xxx",
			icon: "icon-xxx"
		}]
	});

	// 保存editingId到sessionStorage
	storage("editingId", menuId);
	
	// 开启行编辑
	treegrid.treegrid("beginEdit", menuId);
}

保存数据

点击保存会修改editingId的值为undefined，相当于删除

/**
 * 保存
 */
function save() {
	let editingId = getStorage("editingId");

	if (editingId) {
		let treegrid = $("#menu_treegrid");

		if (editingId) {
			// 只有结束编辑才能获取到最新的值
			treegrid.treegrid("endEdit", editingId);

			let postData = {
				id: editingId,
				name: data.name,
				url: data.url,
				icon: data.icon,
				parentId: parentId
			};

			console.log(postData);

            // 修改editingId的值为undefined，相当于删除
			storage("editingId", undefined);

			// post("/menu/updateById", postData, function () {
			// 	storage("editingId", undefined);
			// }, error);
		}
	}
}

编辑数据

选中表格一行，点击编辑按钮，就会根据editingId的值来判断当前有没有行在编辑，如果有的话，选中当前行，但是不结束正在编辑的行。如果没有在编辑的数据行，则开启当前选中行的编辑。

/**
 * 修改
 */
function edit() {
	let editingId = getStorage("editingId");

	console.log(editingId);

	if (editingId) {
		$("#menu_treegrid").treegrid("select", editingId);
	} else {
		let row = $("#menu_treegrid").treegrid("getSelected");

		console.log("开始编辑行：");
		console.log(row);

		if (row) {
			storage("editingId", row.id);

			$("#menu_treegrid").treegrid("beginEdit", row.id);
		}
	}
}

四、问题分析

点击修改按钮无反应，但是并没有报错，问题很显然，是一直走的if分支，一直在选中当前行。

所以，问题的关键就在editingId的值，上面通过浏览器打印出来的值为undefined，很显然没有什么问题。

但是，致命的就是这里，这里打印的undefined并不是未定义，而是字符串的"undefined"。

直接打印undefined是灰色的，如图，下面的那个是真的undefined

五、问题解决

方案一：既然不能直接存undefined，那么就存一个空字符串进去，问题完美解决~

/**
 * 保存
 */
function save() {
	let editingId = getStorage("editingId");

	if (editingId) {
		let treegrid = $("#menu_treegrid");

		if (editingId) {
			// 只有结束编辑才能获取到最新的值
			treegrid.treegrid("endEdit", editingId);

			let postData = {
				id: editingId,
				name: data.name,
				url: data.url,
				icon: data.icon,
				parentId: parentId
			};

			storage("editingId", "");
		}
	}
}

方案二：从localStorage中删除数据

/**
 * 保存
 */
function save() {
	let editingId = getStorage("editingId");

	if (editingId) {
		let treegrid = $("#menu_treegrid");

		if (editingId) {
			// 只有结束编辑才能获取到最新的值
			treegrid.treegrid("endEdit", editingId);

			let postData = {
				id: editingId,
				name: data.name,
				url: data.url,
				icon: data.icon,
				parentId: parentId
			};

			localStorage.removeItem("editingId");
		}
	}
}

沐雨橙风ιε
关注
专栏目录
Vue使用localStorage存储数据的方法
12-11
`localStorage`是Web Storage API的一部分，用于在浏览器中存储键值对，且数据在关闭浏览器后仍然存在。本文将详细讲解如何在Vue项目中使用`localStorage`存储数据。 首先，`localStorage`只支持存储字符串类型的...
web-javascript
03-19
9. **Web API和WebGL**：Web API如WebSocket用于实现双向通信，Web Storage提供本地数据存储，Web Workers处理后台任务，WebGL则允许在浏览器中进行3D图形渲染。 10. **跨平台开发**：借助React Native或 Ionic，...
Storage存储范例
guoshuyan12的博客
05-19 357
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script language="JavaScript"&gt; function onLoad() { i
HTML5本地存储之WebStorage篇
潇兮水寒的博客
05-11 303
Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。Web Storage又分为两种： sessionStorage localStorage从字面意思就可以很清楚的看出来，sessionStor...
javascript语言 各大浏览器前端存储数据的 cookie localstorage chrome拓展chrome.storageAPI
qq_40033374的博客
01-23 555
这里先附上 javascript 设置和获取cookie的方法和代码 function getCookie(c_name) { if (document.cookie.length>0) {  c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1) {  c_start=c_start + c_n
web storage
磷火的博客
05-12 650
介绍 在html4及以前，在客户端存储用户数据（包括个人信息，浏览痕迹等），依赖的是cookie，而cookie有其天生的劣势，导致有些情况不能满足需求或者影响用户体验。 cookie的劣势体现在以下方面： 1.cookie的大小限制在4KB，不适合大量数据存储 2.浏览器还限制站点可以在用户计算机上存储的cookie的数量 3.cookie是随HTTP事务一起被发送的，因此会浪费一
认识H5中Web Storage
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-05 1381
认识h5中Web Storage Cookie的缺点 Web Storage对象 sessionStorage对象
html5 web storage攻击,HTML5安全风险详析之二：Web Storage攻击
weixin_36151066的博客
06-21 225
**一、WebStorage简介**HTML5支持WebStorage，开发者可以为应用创建本地存储，存储一些有用的信息。例如LocalStorage可以长期存储，而且存放空间很大，一般是5M，极大的解决了之前只能用Cookie来存储数据的容量小、存取不便、容易被清除的问题。这个功能为客户端提供了极大的灵活性。**二、攻击方式**LocalStorage的API都是通过Javascript提供的，...
JavaScript 获取浏览器本地数据的4种方式
程序员陆通
10-06 873
选择哪种存储机制取决于你的具体需求。和是最简单的选择，适用于存储小量数据。Cookies则更多地用于跨请求保持会话状态。而IndexedDB提供了更强大的功能，适用于需要存储大量结构化数据的场景。了解这些存储机制及其用法，将帮助你更有效地管理客户端数据，从而提升Web应用的性能和用户体验。
Web Storage的使用
weixin_54443782的博客
07-19 256
今天学习WebStorage的使用，里面包含两种存储方式一个localStorage它是一种长期储存在浏览器中，浏览器关闭不会清除，除非手动删除才会消失，一种是sessionStorage是在浏览器关闭后就会一起删除，不会继续在浏览器中保存，localStorage的大小最多是5M，而sessionStorage大小最多是20M。效果是这样的，每次打开页面里面的数字并不会消失，而会继续叠加，直到手动删除，否则就会每点一下，就增加一个，在localStorage和sessionStorage里面的属性有。..
Web Storage：浏览器端数据储存机制
weixin_42779798的博客
08-20 1106
1、概述 Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。 sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期...
JavaScript Web教程
01-01
10. **Web API**：JavaScript可以调用浏览器提供的各种API，如Fetch API用于网络请求，Web Storage（localStorage和sessionStorage）用于本地数据存储，Web Worker用于后台计算等。 这个"JavaScript Web教程"的PDF...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 408
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 741
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
Vue中的常用指令
m0_62388400的博客
11-12 1128
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 147
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
如何编译 Cesium 源码
最新发布
ismartcube的博客
11-13 731
通过以上步骤，您可以成功地从 GitHub 上下载 Cesium 源代码并在本地进行编译。对于开发人员来说，编译 Cesium 源码有助于定制功能，或者调试某些问题。如果您只是想使用 Cesium 进行开发，而不需要编译源代码，您也可以直接从 CDN 或下载预构建版本进行使用。编译的 Cesium 版本可以直接在您的应用中引用，或者部署到 Web 服务器上，供其他用户访问。提供一个高效、兼容、优化的数据转换工具，一站式完成数据转换、数据发布、数据预览操作。
从零开始快速构建Vue3项目
欧唯薇
11-13 679
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值