在 localStorage 中上传和检索存储图像的示例详解

更新时间：2022年06月13日 14:31:32 作者：allway2

这篇文章主要介绍了在 localStorage 中上传和检索存储图像,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

什么是本地存储？

本地存储允许将数据作为键/值对存储在浏览器中。此数据没有设置的到期日期，并且在关闭浏览器时不会被清除。只有字符串值可以存储在本地存储中 - 这不是问题，我们将在这篇文章中看到我们将如何存储一组图像以及每个图像的一些数据。

示例：存储照片集

这个例子的前提是允许用户上传一组照片。成功上传后，他们的照片将被渲染，并且能够从收藏中删除照片。添加和删除照片也会导致浏览器的 localStorage 更新。

此页面的现场演示可以在我的 JSFiddle 帐户上找到：https ://jsfiddle.net/sbhomra/bts3xo5n/ 。

代码

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Storing Images in Local Storage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            <h1>
                Example: Storing Images in Local Storage
            </h1>
            <input id="image-upload" type="file" />
            <ul id="image-collection">
            </ul>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

JavaScript

const fileUploadLimit = 1048576; // 1MB in bytes. Formula: 1MB = 1 * 1024 * 1024.
const localStorageKey = "images";
let imageData = [];
 
// Render image in HTML by adding to the unordered list.
function renderImage(imageObj, $imageCollection) {
  if (imageObj.file_base64.length) {
    $imageCollection.append("<li><img src=\"data:image/png;base64," + imageObj.file_base64 + "\"  width=\"200\" /><br />" + imageObj.name + "<br /><a href=\"#\" data-timestamp=\"" + imageObj.timestamp + "\" class=\"btn-delete\">Remove</a></li>")
  }
}
 
// Add image to local storage.
function addImage(imageObj) {
  imageData.push(imageObj);
  localStorage.setItem(localStorageKey, JSON.stringify(imageData));
}
 
// Remove image from local storage by timestamp.
function removeImage(timestamp) {
  // Remove item by the timestamp.
  imageData = imageData.filter(img => img.timestamp !== timestamp);
 
  // Update local storage.
  localStorage.setItem(localStorageKey, JSON.stringify(imageData));
}
 
// Read image data stored in local storage.
function getImages($imageCollection) {
  const localStorageData = localStorage.getItem(localStorageKey);
 
  if (localStorageData !== null) {
    imageData = JSON.parse(localStorage.getItem(localStorageKey))
 
    for (let i = 0; i < imageData.length; i++) {
      renderImage(imageData[i], $imageCollection);
    }
  }
}
 
// Delete button action to fire off deletion.
function deleteImageAction() {
  $(".btn-delete").on("click", function(e) {
    e.preventDefault();
 
    removeImage($(this).data("timestamp"));
 
    // Remove the HTML markup for this image.
    $(this).parent().remove();
  })
}
 
// Upload action to fire off file upload automatically.
function uploadChangeAction($upload, $imageCollection) {
  $upload.on("change", function(e) {
    e.preventDefault();
 
    // Ensure validation message is removed (if one is present).
    $upload.next("p").remove();
 
    const file = e.target.files[0];
 
    if (file.size <= fileUploadLimit) {
      const reader = new FileReader();
 
      reader.onloadend = () => {
        const base64String = reader.result
          .replace('data:', '')
          .replace(/^.+,/, '');
 
        // Create an object containing image information.
        let imageObj = {
          name: "image-" + ($imageCollection.find("li").length + 1),
          timestamp: Date.now(),
          file_base64: base64String.toString()
        };
 
        // Add To Local storage
        renderImage(imageObj, $imageCollection)
        addImage(imageObj);
 
        deleteImageAction();
 
        // Clear upload element.
        $upload.val("");
      };
 
      reader.readAsDataURL(file);
    } else {
      $upload.after("<p>File too large</p>");
    }
  });
}
 
// Initialise.
$(document).ready(function() {
  getImages($("#image-collection"));
 
  // Set action events.
  uploadChangeAction($("#image-upload"), $("#image-collection"));
  deleteImageAction();
});

要查看的关键功能是：

添加图片（）
删除图像（）
获取图像（）

这些函数中的每一个都使用 JSON 方法将上传的照片存储为对象数组。每张照片包含：名称、时间戳和一个 base64 字符串。这些函数中使用的一个常见功能是使用 JSON 方法来帮助我们将照片集合存储在本地存储中：

JSON.stringify() - 将数组转换为字符串。
JSON.parse() - 将 JSON 字符串转换为对象数组以进行操作。

从本地存储中保存或检索保存的值时，需要通过“键”设置唯一标识符。在我的示例中，我设置了以下在需要使用“localStorage”方法时引用的全局变量。

const localStorageKey = "images";

保存到 localStorage 时，我们必须对对象数组进行字符串化：

localStorage.setItem(localStorageKey, JSON.stringify(imageData));

检索我们的数组需要我们将值从字符串转换回对象：

imageData = JSON.parse(localStorage.getItem(localStorageKey))

在我们上传了一些图片之后，我们可以通过进入您的浏览器（对于 Firefox）Web 开发人员工具，导航到“存储”选项卡并选择您的站点来查看存储的内容。如果使用 Chrome，请转到“应用程序”选项卡并单击“本地存储”。

存储限制

可以存储的值的最大长度因浏览器而异。数据大小目前介于 2MB 和 10MB 之间。

当我决定使用本地存储来存储用户照片时，我担心超出存储限制，因此我将每张照片的上传限制设置为 1MB。当我有机会在真实场景中使用我的代码时，我打算使用Hermite Resize来实现一些图像压缩和调整大小的技术。

到此这篇关于在 localStorage 中上传和检索存储图像的文章就介绍到这了,更多相关localStorage存储图像内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript双向链表实现LRU缓存算法的示例代码
本文主要介绍了JavaScript双向链表实现LRU缓存算法的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-01-01
JS实现长图上下滚动效果
这篇文章主要为大家详细介绍了JS实现长图上下滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
JS/jQuery判断DOM节点是否存在的简单方法
下面性价比就为大家带来一篇JS/jQuery判断DOM节点是否存在的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起小编过来看看吧
2016-11-11
点选TOP后并不是直接跳到页顶的，而是滚动上去
滚动至页顶，比以前的直接跳到页顶效果好很多，正的很不错
2008-09-09
JavaScript中Array的filter函数详解
这篇文章主要介绍了JavaScript中Array的filter函数详解,filter 为数组中的每个元素调用一次callback函数,W更多具体内容，需要的朋友可以参考一下
2022-07-07
仿猪八戒网左下角的文字滚动效果
觉得猪八戒网左下角的文字滚动，效果不错！自己摸索了一下，以自己的方法实现了！没有运用jQuery,不过用了自己的编写的Js库！
2011-10-10
一文详解JavaScript如何安全的进行数据获取
这篇文章主要为大家介绍了JavaScript如何安全的进行数据获取方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
禁止弹窗中蒙层底部页面跟随滚动的几种方法
我们大家在做弹出层的时候，必不可少的一个元素就是蒙层，也就是遮罩层，当弹出层滚动的时候，蒙层底部的页面一般是要求固定不动的，所以这篇文章就来给大家介绍了如何禁止弹窗中蒙层底部页面跟随滚动的几种方法，需要的朋友可以参考下。
2017-12-12
js对象之JS入门之Array对象操作小结
每天一对象,今天我们也来new一个。没有系统的学过JS，没有特别的写过一个比较出色的类库，没有运用过一个很强的类库，prototype.js在进行着，慢慢的前进相信不久的将来就可以应用prototype.js来开发自己的应用程序了。
2011-01-01
JS原生轮播图的简单实现(推荐)
下面小编就为大家带来一篇JS原生轮播图的简单实现(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07