如何将图像保存到本地存储？

Question

我的网站标题中有一个徽标。我使用本地 storage.There 以 2 种颜色编译此站点没问题。但是当颜色改变时，我想用本地 storage.How 更改徽标，我可以这样做吗？我不知道图像如何保存在语言环境存储中

let theme = localStorage.getItem('data-theme');
const Btn = document.querySelector('.buton');
const logo = document.queryCommandIndeterm('.img');
//logo.src = logo1.png
//other logo.src = logo2.png
const changeThemeToBlue = () =>{
    document.documentElement.setAttribute("data-theme", "blue");
    localStorage.setItem("data-theme", "blue");
}

const changeThemeToGreen = () =>{
    document.documentElement.setAttribute("data-theme", "green");
    localStorage.setItem("data-theme", 'green');
}

if(theme === 'blue'){
    changeThemeToBlue()
}

Btn.addEventListener('click', ()=> {
    let theme = localStorage.getItem('data-theme');
    if (theme ==='blue'){
        changeThemeToGreen()
    }else{
        changeThemeToBlue()
    }
   
});

Answer 1

只需根据颜色更改徽标即可。我稍微重构了你的代码，并添加了 changeLogoBasedOn(color)。我还将 Btn 更改为 themeBtn 并在第一行的 localStorage.getItem('data-theme') 为 null 时添加了默认值。

let theme = localStorage.getItem('data-theme') || 'blue';
const themeBtn = document.querySelector('.buton');
const logo = document.queryCommandIndeterm('.img');

const changeTheme = (color) => {
  document.documentElement.setAttribute("data-theme", color);
  localStorage.setItem("data-theme", color);
  changeLogoBasedOn(color);
}

const changeLogoBasedOn = (color) => {
  let logo = 'logo1.png';

  if (color == 'green') {
    logo = 'logo2.png';
  }

  logo.src = logo;
}


themeBtn.addEventListener('click', () => {
  let theme = localStorage.getItem('data-theme');
  
  if (theme == 'blue') {
    changeTheme('green');
  } else {
    changeTheme('blue');  
  }
});

changeTheme(theme);

Answer 2

为了调用之前的“状态”（blue 或 green），您需要在页面加载后获取存储在 localStorage 中的数据：

const getData = key => JSON.parse(localStorage.getItem(key) || null);
...
document.body.onload = init;
...
function init(e) {
  // Get the saved theme from LS
  let data = getData('theme');
...

保留一个简单的对象来存储每个徽标的 url（无需在 LS 中保存 url，因为它们本身永远不会更改）。

const logo = {
  green: 'https://transpo.uconn.edu/wp-content/uploads/sites/1593/2018/10/Green-Logo-REV-DAA-jpeg-1.jpg',
  blue: 'https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/v1483631401/vizink60c2lcy1v9xk2s.png'
};

...

document.images[0].src = logo[data];

document.images 是一个 HTMLCollection -- document.images[0] 是页面上的第一个 <img>。如果徽标不是第一个 <img> 并且由于某种原因您不知道它的索引位置（比如它是动态添加的），只需使用更常见的方法，例如 good ol' .querySelector().

更多细节在下面的例子中注释

注意：SO 不允许使用 localStorage，因此此代码段将无法按预期运行。有关功能示例，请访问：

Plunker

// This stores the urls for the logo
const logo = {
  green: 'https://transpo.uconn.edu/wp-content/uploads/sites/1593/2018/10/Green-Logo-REV-DAA-jpeg-1.jpg',
  blue: 'https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/v1483631401/vizink60c2lcy1v9xk2s.png'
};

/*
Reference <html> and <button>
*/
const root = document.documentElement;
const btn = document.querySelector('.switch');

/*
Define functions that get and set localStorage
*/
const getData = key => JSON.parse(localStorage.getItem(key) || null);
const setData = (key, data) => localStorage.setItem(key, JSON.stringify(data));

/*
Register the <body> to the 'load' event.
When 'load' event is triggered, init(e)
is invoked
*/
document.body.onload = init;

/*
Register the <button> to the "click" event.
theme(e) event handler will be invoked.
*/
btn.addEventListener('click', theme);

// Event handler passes the Event Object
function init(e) {
  // Get the saved theme from LS
  let data = getData('theme');
  // If there's nothing saved yet quit
  if (data === null) return;
  // Assign data to .value of <button>
  btn.value = data;
  // Remove <html> class
  root.className = '';
  /*
  Add current theme name to <html> as a 
  class
  */
  root.classList.add(data);
  /*
  Change <img> src to the property of  
  the logo object that matches current 
  theme.
  */
  document.images[0].src = logo[data];
};

// Event handler passes Event Object
function theme(e) {
  // declare status
  let status; 
  // On <html> toggle both theme classes
  root.classList.toggle('green');
  root.classList.toggle('blue');
  /*
  If <html> becomes '.blue' assign 'blue'
  to status, otherwise assign 'green'
  */
  if (root.classList.contains('blue')) {
    status = 'blue';
  } else status = 'green';
  // Assign status to .value of <button>
  this.value = status;
  /*
  Change <img> src to the property of  
  the logo object that matches current 
  theme.
  */  
  document.images[0].src = logo[status];
  // Save theme name to LS
  setData('theme', status);
};

html {
  font: 2ch/1.25 'Segoe UI';
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
figure {
  width: 3rem;
}
img {
  display: inline-block;
  width: 3rem;
  object-fit: contain;
}
button {
  display: inline-block;
  font: inherit;
  width: 4rem;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
}
button::before {
  content: attr(value);
  text-transform: capitalize;
}
.blue body {
  background: lightsteelblue;
  color: midnightblue;
}
.green body {
  background: mediumseagreen;
  color: forestgreen;
}
.blue button {
  background: powderblue;
  color: royalblue;
  border-color: indigo;
}
.green button {
  background: palegreen;
  color: teal;
  border-color: olivedrab;
}

<!doctype html>

<html class='blue'>
  <head>
    <link rel="stylesheet" href="lib/style.css">
  </head>
  <body>
    <header>
     <h1>Main Title</h1> <figure><img src='https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_170,w_170,f_auto,b_white,q_auto:eco,dpr_1/v1483631401/vizink60c2lcy1v9xk2s.png'></figure>
    </header>
   <button class='switch' type='button' value='blue'></button>
    <script src="lib/script.js"></script>
  </body>
</html>

如何将图像保存到本地存储？

How can I save image to local storage?

javascript

local-storage

Plunker