J'essaie de créer un système dans lequel l'utilisateur entre plusieurs valeurs à des moments différents, puis peut cliquer sur un bouton qui lui indique l'une de ses entrées (au hasard). Voici ce que j'ai jusqu'à présent:
(Remarque: pour une raison étrange, cet extrait de code ne fonctionne pas correctement ici (du moins pas de mon côté) mais il fonctionne très bien dans JS Bin et même mon propre Notepad ++)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="itemForm">
<input type="text" id="itemInputBox" autocomplete="off" onmouseout="store()"><br><br>
<button id="getStoredValue" onclick="get()" type="button" style="cursor:pointer;">Get Input Value</button>
</form>
<div id="outputArea"></div>
</body>
</html>function store(){
var toStore = document.getElementById("itemInputBox");
localStorage.setItem("itemInputBox", toStore.value);
}
function get(){
var toGet = localStorage.getItem("itemInputBox");
document.getElementById("outputArea").innerHTML = toGet;
}Comme je suis assez nouveau dans le codage (je ne le fais que depuis un an environ) et que je suis également nouveau sur localStorage, j'ai besoin de quelques conseils pour cela. Merci à quiconque répond!
3 Réponses :
Vous pouvez utiliser un tableau pour stocker vos valeurs
Avant d'ajouter une nouvelle valeur, vous devrez récupérer la baie du stockage local
Ajoutez la nouvelle valeur à la baie et remplacez la baie précédente dans le stockage local par la mise à jour
Utilisez JSON pour sérialiser les données afin de les stocker dans le stockage local S'il n'y a pas de données dans le stockage local, créez un tableau avec la valeur
Pour la fonctionnalité get, après avoir récupéré le tableau, vous pouvez générer un nombre aléatoire de 0 à la longueur du tableau-1 pour choisir une valeur par index.
Vous pouvez utiliser des tableaux en Javascript pour stocker plusieurs valeurs dans le localStorage. Lors du stockage des valeurs, elles doivent être au format JSON. De plus, lors de la récupération des valeurs, vous devez transmettre cette chaîne JSON à `JSON.parse (array), puis récupérer les valeurs.
Pour obtenir une valeur aléatoire de ce tableau, vous pouvez utiliser des fonctions mathématiques en JavaScript. Veuillez consulter l'exemple ci-dessous. Cela ne fonctionnera pas dans la section des extraits de code StackOverflow car il restreint les fonctions LocalStorage, mais vous pouvez le vérifier localement.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form id="itemForm">
<input type="text" id="itemInputBox" autocomplete="off"><br><br>
<button onclick="store()" type="button">Store Value</button>
<button id="getStoredValue" onclick="parseValueToHTML()" type="button" style="cursor:pointer;">Get Input Value</button>
</form>
<div id="outputArea"></div>
</body>
</html>function store(){
var toStore = document.getElementById("itemInputBox");
var valuesJSON = get();
if (valuesJSON == null){
createLocalStorageKey();
}
var values = JSON.parse(get());
values.items.push(toStore.value);
localStorage.setItem("itemInputBox", JSON.stringify(values));
}
function createLocalStorageKey(){
localStorage.setItem("itemInputBox", JSON.stringify({items:[]}));
}
function get(){
var toGet = localStorage.getItem("itemInputBox");
return toGet;
}
function parseValueToHTML(){
var valuesJSON = get();
if (valuesJSON == null){
createLocalStorageKey();
}
var values = JSON.parse(get());
document.getElementById("outputArea").innerHTML = values.items[Math.floor(Math.random() * values.items.length)];
}J'aime ce dernier ... et je vous remercie tous d'avoir répondu, mais aucun ne semblait fonctionner. Le premier ne donnait pas d'endroit où je pourrais .innerHTML l'entrée aléatoire, et bien que le second ait une place, il était défectueux. Pouvez-vous s'il vous plaît faire des modifications afin qu'il mette réellement une entrée aléatoire dans le div? J'ai cherché partout et je n'ai pas trouvé la réponse souhaitée. Cela fait partie d'un projet plus large, et cela me donne également plus de connaissances. Merci!
J'ai mis à jour le code. Veuillez approuver la réponse si cela a aidé :)
Sur votre version mise à jour, il me donne un nombre aléatoire. Pour clarifier, voici ce que je demande: je veux un endroit où l'utilisateur peut saisir une valeur (un mot), puis il est ajouté à localStorage. Ensuite, l'utilisateur peut en saisir un autre, qui est ajouté au stockage et ainsi de suite. Ensuite, je veux un bouton qui saisit une valeur aléatoire (que l'utilisateur a entrée) du stockage et l'affiche dans l'élément div.
Mise à jour du code. Maintenant, il stockera les valeurs avec "stocker la valeur" mais et récupérera une valeur aléatoire par le bouton "Obtenir la valeur d'entrée"
Je viens de modifier votre code. Cela ne fonctionnait pas à cause d'une petite chose - le bouton 'Store Value' que vous avez créé n'avait pas 'type = "button"' qui, pour une raison quelconque, car il est sous une forme, le processeur n'a pas accepté. J'ai fait la même erreur en écrivant le code de ma question initiale, j'ai donc pu trouver l'erreur dans votre code mis à jour. Bref ... après avoir fait le montage, c'est exactement ce que je cherchais. Merci pour votre aide, j'étudierai ceci, et prendrai l'information pour l'ajouter à mon arsenal de connaissance. Merci encore et je l'approuverai une fois que vous aurez approuvé mes modifications. Merci!
Génial. J'ai ajouté votre modification. Vous pouvez approuver :)
mon chemin...
<form name="item-form"> <input type="text" name="itemInputBox" autocomplete="off"> <br><br> <button name="setValueStored" type="button">Set value in store</button> <button name="getStoredValue" type="button">Get random input value from store</button> </form>
const itemForm = document.forms['item-form']
, getAllItems = _ =>
{
let r = localStorage.getItem('itemInputBox')
return !r ? [] : JSON.parse(r)
}
, setAllItems = arr =>
{
localStorage.setItem('itemInputBox',JSON.stringify(arr))
}
;
itemForm.setValueStored.onclick=()=>
{
let val = itemForm.itemInputBox.value.trim()
if (val)
{
let store = getAllItems()
if (!store.include(val))
{
store.push(val)
setAllItems(store)
}
}
itemForm.itemInputBox.value = ''
}
itemForm.getStoredValue.onclick=()=>
{
let store = getAllItems()
itemForm.itemInputBox.value = (!store.length) ? '' : store[Math.floor(Math.random() *store.length)]
}
la raison pour laquelle localstorage ne fonctionne pas dans l'extrait de code est dans la console: "message": "Uncaught SecurityError: Impossible de lire la propriété 'localStorage' à partir de 'Window': Le document est en bac à sable et n'a pas le 'allow-same-origin ' drapeau."