Make localStorage Data read-Only

Question

I am working on AngularJs application .

I store data in localStorage as

localStorageService.set("selectedUserCategory",'Circle');

Now When I see Browser's localStorage data

-- Application
---- LocalStorage

I find my key-value as

selectedUserCategory : 'Circle'

But this data is editable . ie

If I edit data from Circle to Ci through browser itself it gets saved as Ci , and this might prove harmful because anyone can change data from there .
So I thought of making it read-only . Is there any way of doing it ?

Also is there any way to secure my localStorage data ?
Since the data is easily readable should I encrypt it and then save ??

Answer 1

As said by @Carcigenicate nothing is secure once it's on browser. One more step you can do is to store encrypted data in local storage. So it will be difficult for normal user to edit. And if he edits it will not decrypt and thus you can invalid following tasks.

To prevent further, you can Obfuscate/minify your javascript files so it's difficult for ordinary user to reach to your encryption algorithm.

Or if possible encrypt values from server, and using public key, only decryption logic will be on front end side. So even if user gets your data ( AND public key even ), he won't be able to encrypt it (without your private key) thus it makes impossible for him to alter data.

JSON web token uses this principle, visit https://jwt.io/