We Keep Coding

how to use local storage in a proper way

i'm creating a form of inscription and i want to get info from a first page to show in a second one. I've tried to use local storage, but it doesn't work.
I've tried to test in the same page, which works, but when i try it with the localstorage, it doesn't work, and when i click on submit it reloads the page and nothing happens
Here is the code for the first page:
function rform()
{
document.getElemeentByName('insc').reset;
}
function client()
{
var sexe=document.getElemeentByName('gender');
var userT=document.getElementById('choice').selectedIndex;
var name = document.getEelementById('name').value;
localStorage.setItem('name',name)
if (userT[1] || userT[2] &&sexe[0].checked )
{
var choice = document.getElementById('choice').value;
localStorage.setItem('choice',choice)
else
{
var res = document.getElementById('choice').value + 'e';
localStorage.setItem('choice',choice)
}
return false;
}
And the second page:
<span id="result"></span>
<script type="text/javascript">
document.getElementById("result").innerHTML= 'welcome '
+localStorage.getItem('name')+ ' you are '
+localStorage.getItem('choice');
</script>`
I get nothing in the second page, but expect to get a welcome message with the name and the user type

var choice = document.getElementById('choice').value;
localStorage.setItem('choice','choice')
This isn't setting the value of Choice into localStorage, this is simple setting the value of localStorage named Choice to the string "Choice".
Should be;
var choice = document.getElementById('choice').value;
localStorage.setItem('choice',choice);

Sending data and saving in a text field

I have a main page with a popup window.
<textarea class="form-control item"></textarea>
<button type="button" class="btn btn-primary" name="name">Send</button>
There is also a second page. (/conclusion/main)
<textarea id="retro" style="height: 200px; width: 800px"></textarea>
I enter the text in the window and send. The window should close and the text should be sent to the second page and the text should be saved in the field "textarea". Even if they close the page or reload, the text should remain in the second page.
This code allows you to save, but after closing the page, does not save
(function(){
var textarea = document.getElementById('retro');
if (localStorage.retro)
{
textarea.value = localStorage.retro;
}
textarea.onchange = function()
{
localStorage.retro = this.value;
}
})();
Sends from the first page to the second
function getParams(){
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++){
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params2;
}
params = getParams();
name = unescape(params["name"]);
document.getElementById('retro').innerHTML = name;

There are some questions around what you are trying to do here. What I have done is broken this down into 2 parts
Passing the local storage between 2 pages and accessing it.
Decoding Parameters in the URL and assigning them
Some assumptions that I made:
I have noticed some of the classes from bootstrap so i assume that you have jQuery on the page and also you may know how to use it.
Using chrome for testing this
PART 1 - Passing localstorage between windows:
First thing to note is you may be better using a cookie library (js-cookie) or creating one yourself that you can access. As localstorage may well be insecure depending on what data you want to store in there.
With that out of the way, you were on the right track, just needed to add your event listener to 'input' as i think then every keystroke the data in local storage is being updated.
Page 1
HTML
<textarea id="retro" class="form-control item"></textarea>
<button type="button" class="btn btn-primary" name="name">Send</button>
JS (I would recommend place this at the bottom of you page for quick testing)
<script type="text/javascript">
var textarea = document.getElementById('retro');
textarea.addEventListener('input',function(){
localStorage.setItem('retro', this.value);
})
</script>
In Chrome developer tools if you watch the variable 'localstorage' then you will see this change as you key in the value.
What I have done here is bound the event listener to the text area so that any 'input' the value changes, furthermore is am setting the item in the localstorage
PAGE 2
HTML
<textarea id="retro" style="height: 200px; width: 800px"></textarea>
JS
<script type="text/javascript">
var textarea = document.getElementById('retro').value = localStorage.getItem('retro');
</script>
Here using the 'getItem' method for localstorage you can then retrieve it from the storage area and output it as the value of the textarea.
Obviously is the cache or localstorage is cleared then this value will disappear.
PART 2 - Decoding Parameters in the URL and assigning them
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
This function above will get you any parameter you want form the url I found this from here. This is using jQuery.
Here is how you would use it
// example.com?param1=name&param2=&id=6
$.urlParam('param1'); // name
$.urlParam('id'); // 6
$.urlParam('param2'); // null
Well I hope this answers your question on both parts, and helps you further, please add any comments if I have missed anything and I will be happy to update my answer

Sticky notes with local storage

I am using this codepen https://codepen.io/ravitadi/pen/CsIFL and I would like to add another field for the user to input a title for the note.
I am a javascript noobie and I can't seem to get it right. This is the function for adding notes. The full script is in the codepen.
function addNote(){
var usrInput = $('.txtBox').val();
//console.log(usrInput);
if(usrInput.length > 0){
console.log($(this));
$('#').removeClass('ntActv');
addtoSticky(usrInput);
cnclOvrly();
//console.log(notes);
}else{
}
}
function addtoSticky(note){
if(note.length > 0){
console.log(note);
createSticky(note);
localStorage.setItem('note_'+note.length, note);
}
}
function createSticky(text){
$('#stkyNts').append('<li class="box">'+text+'</li>');
}
Any help is highly appreciated.
Codepen

I tried to update following your requirement.
You should change way to save object and load object from localstorage.
storedNotes = JSON.parse(localStorage.getItem("notes"));
if(current == null) current = [];
current.push(JSON.stringify(note));
localStorage.setItem('notes', JSON.stringify(current));
https://codepen.io/viethien/pen/RdqKxM

In the modal, add another text box for title before the textarea.
<!-- add this -->
<input type="text" id="title" />
<!-- /add this -->
<textarea class="txtBox"></textarea>
Now you have to grab the value from the title. In the createSticky() function:
function createSticky(text) {
var heading = $("#title").val();
$('#stkyNts').append('<li class="box"><h3>' + heading + '</h3>'+text+'</li>');
}
And there you go:
For the extended functionality, try to change the way, heading is included in the local storage while setting and getting it. For doing so, you need to include the heading in the functions addtoSticky() and getStoredNotes().

Passing a javascript variable to another page through html value field of input tag

Below is my code to get row id:
<script>
function myFunction(x){
alert("row idex="+x.rowIndex);
var rowID=x.rowIndex;
}
</script>
Now I want to pass this row id to another page through input tag of HTML
<input type="hidden" name="rowid" value="here i need to pass the javascript variable that contain row id vale" >
I'm a beginner here so detailed explanation would be appreciated.

Try this
<script type="text/javascript">
function myFunction(x){
alert("row idex="+x.rowIndex);
var rowID=x.rowIndex;
document.getElementById("rowid").value = rowID
}
</script>
Change input to
<input type="hidden" name="rowid" id="rowid" value="" >

When you navigate through pages, your js script gets refreshed on each page load. So you can not directly pass js variable from one page to another. Instead of that you can set cookie on one page and retrieve that cookie on next page.
document.cookie="username=test; expires=Thu, 18 Dec 2013 12:00:00 UTC";
var x = document.cookie;
<script type="text/javascript">
//This function will set the cookie
function myFunction(x){
alert("row idex="+x.rowIndex);
var rowID=x.rowIndex;
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = "row =" + rowID + "; " + expires;
}
//To retrieve the set cookie value call following function
function get_cookie_value()
{
return username=getCookie("row");
}
</script>

JavaScript doesn't provide that kind of functionality to pass the value of varibale to other page,
Though you can do it by storing your value in browser's local storage and get that value back on other page.
No html element needed to pass the variable of js.
Try this
JS on first page : from where you want to send the data
//suppose you want to pass 25 as value of variable rowid
var rowid = 25;
//now store rowid variable in your browser
//window.localStorage.setItem('name to get and set value',your variable);
window.localStorage.setItem('rowid',rowid);
JS on other page : where you want to use that data
//now get that rowid variable in your other page
//window.localStorage.getItem('name to get and set value');
rowid_value = window.localStorage.getItem('rowid');
alert(rowid_value);

Query String Javascript

Using javascript, how do I add some data to the query string?
Basically I want to add the window.screen.height and window.screen.width info to the query string so that I can then email it with the other login info.
Alternatively, how would I populate a couple of hidden fields with the same data, a form is being submitted so I could pick it up from there?
Thanks, R.

I think that the latter option would be easier to implement. For example, if you have the hidden fields like this:
...
<input type="hidden" name="screenheight" id="screenheight" value="" />
<input type="hidden" name="screenwidth" id="screenwidth" value="" />
...
Then the JavaScript would be:
<script type="text/javascript">
document.getElementById('screenheight').value = window.screen.height;
document.getElementById('screenwidth').value = window.screen.width;
</script>

You can also use jquery.query.js to play with querystring.

for hidden fields, give each field an ID then do this
$("#fieldID").attr("value") = someValue;
UPDATE: Sorry, I saw Query and that made me think jQuery.

If you wanted to add it to the location in a library agnostic manner, you could do the following:
var query = window.location.search;
var sep = "?";
if (query) {
sep = "&";
}
window.location = window.location + sep + "h=" +
window.screen.height + "&w=" + window.screen.width;
This of course assumes that you don't have w or h parameters in the query string already.