Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

Localstorage + nytt unikt id (javascript)

Skapad av vimeno, 2014-10-09 20:25 i Webbutveckling & Programmering

3 647
8 inlägg
0 poäng
vimeno
Visningsbild
F 30 Jönköping Hjälte 116 inlägg
2014-10-09 20:25
0
Hej!

Jag undrar om det är någon som har koll på det där med localstorage och hur man skapar ett nytt unikt id på saker.

Jag ska göra en "todolist"-app och då behöver jag ha ett nytt unikt id för varje sak jag lägger till. Med detta unika idt vill jag spara sakerna i localstorage just för att folk ska kunna stänga ner appen och att sakerna är kvar tills nästa gång de startar appen igen.

Hoppas detta inte var allt för krångligt och att det sitter en Javscript-kodarKent där ute som kan hjälpa mig! :)

Smålänningen.

Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

Tvillingen
Visningsbild
P 31 Hjälte 3 117 inlägg
2014-10-09 21:04
0
Jag skulle köra med
Ett stycke javascript-kod:
new Date().getTime();
det visar antalet millisekunder sedan 1970, så om man inte uppdaterar listan ofantligt fort kommer numret att vara unikt. Ska du använda det som id får du dock komma ihåg att lägga till en bokstav innan, för ett id kan inte börja med en siffra. Annars finns data-attributen som alternativ.

Fast jag skulle nog löst det genom att spara en hel lista direkt i localStorage istället. Känns smidigare att göra så :)

Jag är ond!

Direktlänk Svara på inlägg Gästbok
Skicka
vimeno
Visningsbild
F 30 Jönköping Hjälte 116 inlägg
Trådskapare
2014-10-09 21:21
0

Svar till Tvillingen [Gå till post]:
hur gör man det då? :) #noob

Smålänningen.

Direktlänk Svara på inlägg Gästbok
Skicka
kekz
Visningsbild
1347 Hjälte 40 inlägg
2014-10-09 21:36
0

Svar till vimeno [Gå till post]:
Visa oss din kod så blir det lättare :)

fuck em all.

Direktlänk Svara på inlägg Gästbok
Skicka
vimeno
Visningsbild
F 30 Jönköping Hjälte 116 inlägg
Trådskapare
2014-10-09 22:00
0
Ett stycke html-kod:
<!DOCTYPE html>
<html manifest = offline.appcache>
<head>
<meta charset="utf-8" />
<meta name="viewport" c initial-scale=1">
<meta name="apple-mobile-web-app-capable" c>
<meta name="mobile-web-app-capable" c> 
<link rel="shortcut icon" href="favicon.ico">
<link href="main.css" type="text/css" rel="stylesheet">

<title>Inköpslista</title>

</head>

<body>
<div id="kol1" class="kol">
 
    <h1>Inköp</h1>
 <input type="image" src="img/button.png" alt="Submit" id="storknapp" >
      <div id="form">
            <input type"text" id="skriva" placeholder="Skriv din vara här!"/>
            <input type="image" id="knapp" src="img/pluss.png" alt="Submit"/>
    </div>   

        
</div>

<div id="kol2">
<ul id="listaavvara"></ul>
</div>



</body>
[removed][removed]
[removed][removed]
</html>


Ett stycke css-kod:
* {
 margin: 0px;
}
#kol1 {
 background-color: #ddd;
 width: 100%;
 display: block;
 margin-bottom: 30px;
}
#kol1 > h1 {
 display: inline;
 font-size: 70px;
 padding-left: 45%;
 
}
#storknapp {
 border: 0px;
 margin-right: 1%; 
 width: 5%;
 float: right;
}
#skriva{
 width:100%;
 left: 0%;
 border: 0px;
 background-color: #eee;
 font-size: 40px;
 padding: 20px;
 overflow: hidden;
 z-index: -5;
}
::-webkit-input-placeholder {
 font-size: 50px;
}
#knapp {
 position: relative;
 float:right;
 margin-right: 2%;
 margin-top: -83px;
 z-index: 5;
}
#form {
 margin-top: 30px;
 overflow: hidden;
 transition: height 0.3s linear 0s;
 height: 0;
}


li span {

 padding-left: 8%;

}

input[type=checkbox] {
 width: 90px;
 height: 90px;
}


Ett stycke javascript-kod:
function klickaKnapp(x){
 //höjden på skrivytan
 var maxH = "100px"
 var form = document.getElementById("form");
 //när man stänger skrivrutan
 if(form.style.height == maxH){
  form.style.height = "0px";
 }
 //när skrivrutan kommer fram
 else{
  form.style.height = maxH;
 }
}


Ett stycke javascript-kod:
//functionen för att lägga till en ny på klick
var counter = 0;
function laggtill(cool, namnVara) {

 var vara = document.createElement("li");

//lägger till ett item som är en checkbox, och ger möjlighet att kryssa i den när man är klar
 var checkBox = document.createElement("input");
 checkBox.type = "checkbox";
 checkBox.setAttribute("id", 'ID' + counter++);

 var span = document.createElement("span");
 span.innerText = namnVara; 
 

 vara.appendChild(checkBox);
 vara.appendChild(span); 

//hämtar ul i html och säger till funktionen laggtill att lägag till en var vara
 cool.appendChild(vara);
 return checkBox;
}



//hämta id knapp på klick händer detta, 
//hämtar textruta, och säger till att det som skrivs i rutan är det som ska läggas till som vara
var button = document.getElementById("knapp");
 button.onclick = function() { 

  var skriva = document.getElementById("skriva")
  var namnVara = skriva.value;

//om någon av dessa två är sanna så gör vi en "return" 
  if(!namnVara|| namnVara =="" || namnVara == " " ){
   return false; 

  }
 
  laggtill(document.getElementById("listaavvara"), namnVara); 

};
  //hämtar ul i html och säger till funktionen laggtill att lägag till en var vara

Smålänningen.

Direktlänk Svara på inlägg Gästbok
Skicka
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2014-10-09 23:59
0
Svar till vimeno [Gå till post]:
Till att börja med så har du lite fel i din markup. En input kan aldrig vara av typen image. Det du försöker göra bör du göra med en button (och försök att skippa bilderna, det mesta kan man återskapa med css):
Ett stycke html-kod:

<h1>Inköp</h1>
<button type="submit"id="storknapp">Submit</button>
<div id="form">
    <input type"text" id="skriva" placeholder="Skriv din vara här!">
    <button type="submit id="knapp">Submit</button>
</div>


När det kommer till själva problemet med att lagra i localstorage... Well, det verkar saknas lite kod osv, men jag kan förklara lite kort hur jag hade gjort det så får du implementera det själv.

Varje gång en uppgift(?) sparas så hade jag lagt till den till en array, för att sedan uppdatera localstorage
[code:js]
var todos = [];
...
todos.push('Dynamisk sträng från användaren');
localstorage['lista'] = JSON.stringify(todos);
[/code]

Sen för att återhämta datan när sidan laddar om så får du göra om det till en array och loopa igenom för att skapa alla element osv
[code:js]
var todos = JSON.parse(localstorage['lista']);
for(var i = 0; i < todos.length; i++){
//Skapa li's and stuffs
}
[/code]

Herp

Direktlänk Svara på inlägg Gästbok
Skicka
Bjornez
Visningsbild
P 29 Hjälte 335 inlägg
2014-10-10 02:11
0

Svar till vimeno [Gå till post]:
Skulle rekommendera att läsa artikeln (länk längst ner), där går en kille igenom på 4st steg vad localstorage är, hur det funkar även hur du kan skapa en web app med det (han använder Date som tvillingen nämnde för id).

http://paperkilledrock.com/2010/05/html5-localstorage-part-one/

Are you looking for a nerd? Then you have to find me

Direktlänk Svara på inlägg Gästbok
Skicka
vimeno
Visningsbild
F 30 Jönköping Hjälte 116 inlägg
Trådskapare
2014-10-10 11:04
0

Svar till Bjornez [Gå till post]:
Tack, men det löste sig!


Svar till csols [Gå till post]:
Tack, men det löste sig!

Smålänningen.

Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Datorer & IT » Webbutveckling & Programmering » Localstorage + nytt unikt id (javascript)

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons