如何在该场景下用LocalStorage存储矩形与拖拽图片数据？

直接给你拆解两种方案的适用场景，你对照自己的需求来挑就行：

适合只用浏览器端存储的情况 #

如果你的网站只是单用户本地用，不需要换设备还能看到数据，也不用把内容导出给别人，那浏览器端存储完全够，常用的两个选项：

• localStorage/sessionStorage：适合存体积不大的结构化数据——比如矩形的坐标、尺寸，图片的base64编码或者本地路径。API特别简单，一行localStorage.setItem('data', JSON.stringify(yourData))就能存，读的时候用JSON.parse()转回来就行。但要注意它有5MB左右的容量限制，要是图片多、分辨率高，可能存不下。
• IndexedDB：如果数据量比较大（比如一堆高清图的base64），或者需要做复杂的查询，就用这个。它支持更大的存储容量，而且是异步操作，不会卡页面。

这种方案不用搞后端，开发成本低，数据就存在用户自己的浏览器里，省心。

需要用到JSON文件的场景 #

要是有下面这些需求，就得考虑JSON文件（或者说用JSON当数据格式，配合后端存储）：

• 跨设备同步：用户换电脑、换手机打开网站，要能看到之前做的矩形和图片。这时候得把数据存到服务器，JSON是前后端常用的数据传输格式，后端可以把JSON存在数据库里，前端请求的时候再拿回来。
• 导出/分享数据：用户需要把自己做的内容导出成文件备份，或者发给别人。这时候可以把你的数据序列化成JSON，让用户下载成文件；反过来也能支持用户上传JSON文件导入数据。
• 多用户协作：如果要做多人一起编辑同一份内容的功能，JSON可以作为数据交换的格式，配合后端实现实时同步。

另外，纯前端项目也能实现手动读写本地JSON文件（用浏览器的File API），但得用户自己点导入/导出，不像浏览器存储那样自动保存，体验会麻烦点。

总结 #

• 单用户本地用，没跨设备、导出需求：直接用浏览器端存储（localStorage/IndexedDB），简单高效。
• 要跨设备、导出分享或者多人协作：用JSON当数据格式，要么配合后端存，要么做手动导入导出的功能。

内容的提问来源于stack exchange，提问作者EnXan