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://p5js.org/reference/#/p5/storeItem

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | storeItem() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。