We Keep Coding

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.

Store link in localstorage before Laravel auth middleware redirect

I'm creating an invitation link for a laravel application, once a user clicks on the link or tries to access the link I want a path of the link to be stored in localStorage. This is what the link looks like https://example.com/{task_id}/{random_task_link}, I want the random_task_link to be stored in the localStorage. I have a code to do it using js but that is not the case. I used the code below to ensure that the user is logged in before they can access the link page
public function __construct(){
$this->middleware('auth');
}
Now the localStorage code won't work because the page gets redirected before it is accessed. The main purpose of storing the link in the localStorage is to make sure that when a user clicks on the registration link the random_task_link is still available for future use.
Is there any way to get the link in the localStorage before the redirect takes place? Please help me I'm new to laravel. Thanks

i dont get your points there are lots of ways and points where you can store the data in localStorage
first when you are creating the url save at the same time in the localStorage
second make another middleware and call it before the auth middleware or apply just on some specific route
third take this auth middleware to route level and even if grouped you can use Route::post('login', 'LoginController#login')->**withoutMiddleware**(['auth']); for this function and do whatever you wants to do

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.

Saving Links to another page

I am developing a mobile website. It is HTML website.
I have design one blog page and add 100 posts. I have one page named "favourites.html".
I have added a image with each post into the blog page. I want to do, when user may click on image the link should be save to my favourite.html page as list..
I want to add these link as list with remove button.. so user can remove the links...
here is a sample image for more clarification.
http://i.stack.imgur.com/8oZaY.jpg

I would create a database table therefore with userIDs and the url of the favored blog post.
Then you just have to select the userID from table favorites and print it on screen.

you can use cookies. You can also use localStorage. But for blog website you need server side.
If you choose to use jquery for cookies, you need to do something like this
$.cookie("fav","YourValue");
You can download Jquery cookie plugin fro here https://github.com/carhartl/jquery-cookie
If you want it using localStorage then it will be like this
localStorage.setItem("fav", "YourValue");
And to read you need to do something like this
localStorage.getItem("fav");
But for a blog website, you got to have backend development

You can use HTML5 web storage to store favorites links. This will be temporary will be available until user clears cache.
If you want permanent solution you need to move it to backend.
var favs = [{favsurl:"someurl"},{favsurl:"someurl"},{favsurl:"someurl"}]
var favList = JSON.stringify(favs);
// Store
localStorage.setItem("favorites", favList);

How to keep HTML Element on Browser Location Change

Is there a way when Page change location to keep some HTML Element's.
Like a div that will not be re-rendered but keep it's state.
You can find and example like that at Facebook Chat ,you can see that the Chat window does not change it's location or InnerHtml when you navigate to another page.
PS : I have no clue where to start so any documentation would be appreciated.And it would be nice if solution would be XHTML not HTML5

I don't know exactly how facebook chat works, but I do know all chat messages are stored in a database, so you can access them later via messages.
My assumption would be that a Session variable is set letting facebook's UI know what chats you have open, or perhaps its stored in the database as well. In either case, you'd have to use some outside script in order to do this. For sake of ease lets say you'll use PHP, and you'll store the data in a SESSION variable.
/* Storing the variable */
$users = array('user123', 'user456', 'user789');
$_SESSION['chat_windows_open'] = $users;
/* Retrieving the values */
foreach($_SESSION['chat_windows_open'] as $chat) {
/* Use $chat to get the username, query the DB for
the message content, and echo it in whatever form you
wish. */
}

When window.location changes, the page is automaticaly, entirely re-rendered. So, from this point of view, the answer is no. However, this effect can be obtained by using AJAX. Use ajax to make requests to the server while the page does not reload or changes location(window.location is always the same). Here's a good link to start with AJAX:
http://www.w3schools.com/ajax/default.asp
If you still want the page to change it's location, after you've made your ajax request and updated the content on the page, you can use javascript's history.pushState function. However you will have to find a way to make it cross browser(aka. make it work in IE).