p5.js | storeItem()函数

storeItem()函数用于将给定值存储在浏览器本地存储中的键名下。本地存储在浏览会话之间持续存在，即使在重新加载页面后也可以存储值。

它可用于保存非敏感信息，例如用户偏好。不应存储诸如个人信息之类的敏感数据，因为这种存储很容易访问。

句法：

storeItem(key, value)

参数：该函数接受上面提到的两个参数，如下所述：

• key：这是一个字符串，表示将存储值的键。
• value：这是可以存储在键下的任何值。它可以是字符串、数字、布尔值、对象、p5.Color 或 p5.Vector。

下面的示例说明了 p5.js 中的storeItem()函数：

例子：

function setup() {
  createCanvas(400, 300);
  fill("green");
  text("Click anywhere to draw a circle", 10, 20);
  text("The last circle would be redrawn when page is refreshed", 10, 40);
  
  // get the coordinates 
  // from localStorage
  oldX = getItem('xpos');
  oldY = getItem('ypos');
  
  // check if the values are
  // actually present (not null)
  if (oldX != null && oldY != null)
    circle(oldX, oldY, 100);
    
}
  
function mouseClicked() {
  clear();
  fill("green");
  text("Click anywhere to draw a circle", 10, 20);
  text("The last circle would be redrawn when page is refreshed", 10, 40);
  
  posX = mouseX;
  posY = mouseY;
  circle(posX, posY, 100);
  
  // set the coordinates
  // to localStorage
  storeItem('xpos', posX);
  storeItem('ypos', posY);
}

输出：

浏览器的本地存储

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

参考： https://p5js.org/reference/#/p5/storeItem