Easiest way to store little information - javascript

I am quite new to coding so apologies if I'm asking an obvious question. I have managed to create a little web app in html/JavaScript that takes user input and transforms it and dumps it into a variable that I am interested in. All in all, all the information that I want to extract is in the form of an array comprising of 20 integers in the JavaScript code.
What I want to do now is find how to store that information so when somebody fills out the inputs and submits the form - I can have access to it. I have looked around the web and the common suggestion seems to be SQL database. I was just wondering if there is a simpler way of going about it, especially considering the tiny amount of information I need to store?

Well, if you just want to store the data on the website itself for each individual client, localStorage is the way to go. In other words, if you want to just store a bit of data for later, localStorage allows you to store data that is accessible the next time the user loads the page. This data can't be shared with other users, but if your app doesn't need too much security, or data sharing between users, localStorage is the way to go. However, the user can control what's in localStorage, so you need to make sure that you don't store anything sensitive there. In addition, you won't be able to see the data actually stored in localStorage on your website as the developer. All your handling has to be done on the client side. Every browser supports it, and it's really simple to use.
First off, you can set a value in localStorage like this:
localStorage.foo = "bar";
Then, you can get a value from localStorage like this:
localStorage.foo; //Returns "bar"
The only problem is, localStorage values can only be stored as strings.
So, in order to store an array (like you wanted to), you can do:
localStorage.arr = JSON.stringify([1, 2, 3]);
This turns the array into a string.
Then, to get the array from localStorage:
JSON.parse(localStorage.arr)
That's pretty much all you need to know for what you are describing.
If you want the full story on localStorage, visit: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
I hope this answer helped.

Related

How to approach storing code snippets in a database?

for my side project, I want to make a React app that has a textarea where you can paste code snippets in it and then hit save. Then I will store it into a database linked to their user account id for later retrieval.
Are there any good approaches generally used to do something like this? For example, to turn my javascript into a string and store it in a JSON format to be sent off to firebase?
I wanted to try using encodeURI at first but I couldn't even store the code inside a variable yet. Can anyone point me in the right direction? I'd appreciate it so much!
This could be a possible duplication of Is it safe to save user created javascript in database?
Although the general consensus is the risk is not high storing it. But it is high while retrieving and injecting it in the DOM for rendering.
So you should be good storing the the data as a string. But you'll have to be updated about any possible security issues that might pop up later that needs patching.

Not allow localstorage to be changed by user

I use localstorage to store things like highscore in this game: http://wacky2048.ga/
If you inspect element and on the top navigation bar (where you see Elements ... Performance), then click the >> button, click Application, you can see all the localstorage items, and if you double click, you can change it. You may need to make a move and refresh.
A lot of people know this trick so the highscore becomes meaningless.
Is there any way to stop this? I store integers and JSON stringified things (in case you want to suggest a encoding method).
The better solution would be store the data in the server. But if you really want to use localstorage consider storing the JSON as a jwt token and encrypt it using a private key which user doesn't have access.
Also when your app access that data in the localstorage always check for validity. If the token is invalid, what you can do is re fetch the information from the server.
Like i said before this is more of a dumb approach. Storing data in the server would be a better solution.
Edit: To hide the private key you could use environment variables like NODE_ENV (this depends on the framework you are using)

localStorage, better handling when memory fills up

I am writing an application that derives a lot of image data, and doing that takes qutie some time, and during that time the user is waiting.
When I have derived the data I would like to store it in case the user wants to see it again anytime soon. I have been going through some local storage methods in html5 and the most promising for my case seems to be localStorage.
A downside to localstorage is that it tends to not allow that much data to be stored, 5Mb in most cases, and my thoughts are to every time i derive some data, to store it in localStorage. The problem arises when those poor little 5MB get filled up, and then I would like to delete the oldest element from the memory, bu there seems to be no easy way of doing that as everything is just stored in key-value pairs.
So I'm not quite sure how to proceed with using localStorage in this case.
Is there any module or something that can make using localStorage in the manner described above easier?
You can use
1) IndexedDB to store huge data but it will only work in latest browser except Opera mini.
2) OR, store your data in memory and later on to localstorage or vice versa.
3) You can always put your time tag with each key you are storing. you can traverse through keys having specific format to get the oldest key in store and you can delete it easily.
4) you can also put your time stamp in data with your image data, in this case you will not have to extract all keys but complete data objects from the store.
I would suggest you IndexedDB option to overcome your size limitaions.
Hope this will help.
In the end i used this module: https://gist.github.com/ragnar-johannsson/10509331.
Using it the oldest values get deleted if there isnt enough memory to add a new one.

Optimizing local storage and search

I have a web application built in .NET
During a session, the user has to access a dictionary value, that is populated from the database. The user makes frequent calls to it.
I want to cut down the HTTP calls and want to bring the dictionary value to the client and access it from there.
I wanted to understand what would be the best practice to store this dictionary value locally in such a way that retrieving data is very quick?
What I'm trying to really do is similar to what FaceBook does with "#", so when you write #Name, it quickly makes a search in the database and replaces the text with the link. In my case, I have a fixed set of data to search from and usually it is not beyond 10-15 name-value pairs.
I contemplated of storing values in cookies, but don't really know if there would be any storage limit and am also unaware of how quick the retrieval would be.
Any help is much appreciated.
Thank You
If the dictionary is static then you can use JSON.stringify and localStorage to store it. This way the user only needs to load it the first time they ever visit your site. After it is stored in localStorage, I would suggest loading it into a JavaScript object using JSON.parse each time the page is loaded to speed up searching since a JavaScript object works like a hash table.
You could then add a simple check each time the page loads to see if the dictionary needs to be refreshed.
var globalDictionaryHash = null;
function loadDictionary()
{
if (localStorage.getItem("my_dict") == null)
{
localStorage.setItem("my_dict", JSON.stringify(myObjectFromAJAXCall));
}
globalDictionaryHash = JSON.parse(localStorage.getItem("my_dict"));
console.log(globalDictionaryHash['key']);
}

What is the best approach to store xml temporarily on the client side?

My application has a lot of decision to make before finally saving my data to the database. I am using JQuery to do this. I have succeeded in creating a moderately long xml string, due to the fact that the user will enter data that will each need to be verified.
I have made this decision base of the number of trips i expect my application to make back to the server. Currently i'm storing this xml in a hidden field. I want to know if there are better approaches? Please.
Are you passing the hidden field along through multiple form submissions? If that's the case, you should probably look into storing session variables. This really is a lot more reliable (and better practice) than keeping it all client-side.
Make sure you're still verifying the data server-side. Don't trust javascript alone to do it.
You can use the 'data' function in jQuery:
http://docs.jquery.com/Core/data#namevalue
You can store name value pairs and retrieve them when you need them.

Categories