Can localStorage be modified by a client?

Question

I'm attempting to use localStorage as a cookie replacement (detest cookies) so users can stay signed in on a site I operate.

What I planned so far was to save the user's username in localStorage, and have the site check whether anything was in localStorage, and if anything is in localStorage, it'd push the localStorage data to a PHP file via POST and push the user to start a new PHP session and return them back to where they were.

Though I have the concern, I know localStorage can be viewed, in which case possibly encrypting the data server-side would make some sense.

But can LocalStorage data be modified? If not, this would be fine to do, even without encryption, but obviously if a user could modify the localStorage data, they would have access to others' accounts, which as you can imagine, isn't a good thing.

I had the doubt because JavaScript can be executed by a client in a browser, ie:

javascript:alert("hello");

Couldn't it be possible to find out the localStorage's var name and reset it's value like this?

javascript:localStorage.setItem('sessionusername','superadmin');

Basically, I ask: Can HTML5 Local Storage data be modified on client side?

Answer 1

Local storage is bound to the domain, so in regular case the user cannot change it on any other domain or on localhost.

It is also bound per user/browser, i.e. no third party has access to ones local storage.

Nevertheless local storage is in the end a file on the user's file system and may be hacked.

Answer 2

There are addons like e.g. Foundstone HTML5 Local Storage Explorer for Firefox, which permit users not only to browse localStorage globally, but also to modify its content:

So I wouldn't trust on nobody having access to it or nobody can alter it. At least from the client, it is possible with ease. From another website, it might be more tricky, and certainly would involve a "security hole" as it's not the intended usage.

Update: Meanwhile, at least in Firefox, you don't even need any addon for that. Simply press Ctrl+Shift+I, select the Storage tab, and in the left-most column select Local Storage – where you can view and even edit the local storage for the site you've got in the foreground tab:

^{Local Storage browser built-in to Firefox (click image for larger variant)}

Answer 3

Yes it can...

1. Go to the website you wish to modify its localstorage.
2. Enter your console (I press F12 in Chrome or Edge).
3. Press the "Application" tab on top.
4. Choose localstorage on the menu and then the website address underneath.
5. Now you have a list of keys and values in front of you.
6. Press the first blank line under them and enter any key on the left and any value on the right that you wish.