Storing data in cookies,client side verification - javascript

I have created a registration form.i have set the cookies,now my question is, when i click on submit button,all the details which user has given has to be stored in the next page using cookies.how do i proceed.

You can handle form submit and store all the details which user has given into cookies.
forms.addEventListener("submit", function() {
// Handle your data and store them in cookies then you can use them in next page
});
Hope you only use this for learning or development purposes, this is not a good way to handle a registration form!

Rather than cookies I prefer localStorage.
you can just store user token in localStorage using setItem() method and delete data for logouts using removeItem(). If you want to see if token is still there in localStorage you use getItem() method.

Related

Remove ability to edit data if person refreshes page / visits from another tab?

imgur has an interesting feature where
you can create a post using https://imgur.com/upload
after the upload finishes, you will be redirected to the post's page where you can edit the title as much as you want. If you refresh the page / visit it in another tab--the ability to edit the title is gone.
How is Imgur doing this?
My guess is cookies are involved somehow, but I'm not sure.
With PHP, you can use $_SESSION to achieve this
With JS, you can use localStorage to achieve this
With JS, you can use URLSearchParams to achieve this
with next/react, you can use useState to achieve this
On Create save the id of the editable resource, on Render if it matches enable edit and reset the saved editable id.
You can fake the redirect, which means showing the edit page and putting the view page into the URL
on redirecting, set a cookie: https://remix.run/docs/en/v1/api/remix#redirect
return redirect(`resource/$id`, {
headers: {
"Set-Cookie": `editable:$id`,
},
});
Then, use the Cookie API to check that cookie.
you can check for the navigation type. see the answer from #Илья Зеленько on https://stackoverflow.com/a/53307588/14250290
the types you're looking for are reload and back_forward you probably want to have something happen in the backend happen as well to prevent a malicious user.
Another option would be to send a token from the backend when a post is made and in order to edit a post that exact token would need to be sent back. Just don't save the token in anything that persists and on a refresh or new tab it'll be yeeted.
If you do not want to use cookies or session than one way to achieve this is by using useState. update the state when post is created/upload to true(initially false). When user will refresh the page then that state will automatically be false because the component is rendered just now.
Note:- If you do not want to use state you can use redux also to achieve this solution.
After that use that state or redux state to to enable/disable the ability to edit the post.

Display text input from form on another file

what i am trying to do is to have one file with forms that can be filled out, some sort of setting page. When the form is filled out id like to display the input in another file. So one page to put the input and another one to display it.
I already tried to do it with .getElementById, it worked in the sense that i could display the input but only on the same page.
Thank you for your help
From what you have mentioned, you can use WebSockets . You cannot use selectors that are in a different page.
When you fill the form, send a message to server and then the server can emit the message. Just like a chat room.
You can use session variables to do that.
For example Once the form is filled user clicks on the submit button, that will sent the form elements (e.g.name,number,text,etc.) to the session variables using POST method.
And the session variables are accessed,modified throughout the session.
You can store form info into the browser local storage
localStorage.setItem('key', 'value') to create or modify data
localStorage.getItem('key', 'value') to access data
localStorage.removeItem('key') to delete data
localStorage.clear() to delete all data

Save controller state on page refresh

I'm trying to implement a gmail like save message as draft functionality in my form.
Use Case: There is one form with certain fields which includes some text box, some image uploads, etc. My problem is how can I retain the values of these if these have been filled by user on a page refresh. Remember page is not yet submitted by user. If it has been submitted then I could have retrieved the values from server but how can I store values in input box now in case no submit button is clicked.
Should there be some api which will save the values regularly or can there be some api which can be invoked only when user is about to close the page or refresh it ?
I have no idea about this and would appreciate any pointers in this.
Update:
Based on the suggestions, I tried to explore some tutorials/blogs which can show the preoper design and implementation for using local storage. I found following good links:
http://yeoman.io/codelab/local-storage.html
https://domantasjovaisas.wordpress.com/2014/09/05/angularjs-saving-global-variable-in-localstorage/
Few doubts:
It seems we can store a JSON object in local storage but how can I store a given object for a given user.
Use Case: A user can create multiple messages. I just want to keep the last message which was not saved neither sent. How can I design this so that storage works fine ? For a given userId I want to keep some data in local storage. Is it safe to store a db Id in local storage ?
Please suggest
I suggest using a library that abstracts over localStorage and defers to cookies if you are looking to support older browsers. Use JSON.stringify and pass it to your storage service. You can also append usernames to the key if you are likely to have multiple users on one machine. It would be good practice anyways.
Examples include:
https://github.com/grevory/angular-local-storage
http://ngmodules.org/modules/ngStorage
You can hook into ng-change, watches, event listeners or use a timer as someone else suggested.
UPDATE: You can find a trivial implementation here, http://scionsoftware.com/Blog/saving-form-state-with-angular-js/
If you're looking to do it for only one string value as you implied, simply remove the JSON.parse and JSON.stringify pieces from the javascript.

localStorage sign up users how to redirect without losing data

I have a problem with a sign up form. Every time a user creates an account I use localStorage to save the form values. But if after the submit button the user redirects to another page it saves only the last user data who signed up. If after sign up I dont redirect the user to another page I can have more than one users. What can I do to save more users (using localStorage)
the code is:
var passwords=[];
var people= [];
function submitSignUp(){
var usr = signupform.elements["username"].value;
var pass = signupform.elements["password"].value;
people.push(usr);
passwords.push(pass);
localStorage.setItem( 'peoplenames', JSON.stringify(people));
localStorage.setItem('urpasswords',JSON.stringify(passwords));
window.location.href="accountCreated.html";
}
also I use a input type button and not submit because I have the same problem with the submit input. What can I do? Thanks.
Demo
So here is the jsfiddle that should work for you.
some key things are the following.
if(localStorage.getItem('users') != null){
users = JSON.parse(localStorage.getItem('users'));
}
this code checks if the users string has been set for the current page. If users has not been set on local storage is skips this step entirely.
as for processing information from page to page, you will need to do 1 of 3 things.
Send all your calls via ajax. JQuery Get would allow you to stay on the current page while loading content from other pages. You would use the get or post like an IFrame
Navigate through your site using only get methods. Javascript wasn't meant for this, and this doesn't give you much control over the initial state of a webpage.
If you don't want to use Javascript for the rest of your life, or have personal information that shouldn't be held on a local machine. IE: passwords. Use a Server Scripting Language.
In the end it is up to you to decide what to do, but my recommendation would be to use Server Scripting Language and some sort of Database. These are web standards and are marketable skills.

save form data for next visit

I have a page with form in my web (using jsp).
My question is: There is option to go to another page and return to this one without losing the form data. the javaScrip Command-
history.back();
is not good because before I return to the form I pass in several pages (move then one).
There is a way to save this data or I need to create a semi program with javaScript/jsp/java for it?
This is what you need. If you want to try on your own #Duke's solution works well.
Maybe the JavaScript functionality localStorage/sessionStorage is something you should use. When you go to another page, the form data should be serialized and stored in either the localStorage or sessionStorage.
Simple localStorage example:
localStorage.lastname = "Smith";

Categories