Save JSON changes locally - javascript

So I have a little app that I built that allows me to input my class details and it parses it into JSON. The basic structure is:
var $classes = {
className : {
subject: $subject;
teacher: $teacher;
homework: [];
}
}
I have an interface that will create a new object within the $classes object itself, effectively adding another class to my class list. I don't really want to host this program on a server, so the problem I'm having is getting the browser to save the changes made to the action JS file. As it stands, any change I make is wiped on a refresh.
Is it possible to manipulate a local JS file via a browser?
Can I setup a localhost on my machine and somehow us JS to do what I need?
I suspect I'll need a server-side language to do this, but I want to be 100% sure. If so, do you think Node.JS would serve me well? I'm trying to continue my JS track before jumping into another language if possible.
Thanks!

I'm not sure I completely understand your needs, but have you looked at the local storage API? It was added in HTML 5 and allows saving key value data locally in the browser. This would allow you to run your app in the browser without a server backend.
See http://diveintohtml5.info/storage.html for more info on the local storage api. Hope that helps.

Related

HTML download counter without PHP

I'm wondering if it's possible to make a download counter without the use of php. I have been told it's possible but cannot find anywhere that has helped me.
I am trying to save the counts to text file on the server. I cannot use php as my server does not allow the use of it. I have tried javascript but can't seem to get anything working. Any suggestions or guidance would be appreciated!
The server allows, html, javascript, and css.
PHP is the most common server language available on hosting services, if your server does not allow it, it's possible you can't use any language at all on the server side.
Let's assume you can't use any language on the server side, then there is two possible actions.
use a third party server where you can save your data.
save locally your data using javascript.
Using a 3rd party service might be complex to implement and you need to learn a bit about cross origin request. You will need to add a few javascript librairies and understand a lots of concept so I'll just go with the easy one.
You browser have a localStorage wich can be access through Javascrip
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
[!] Know that this will be save only on your browser therefore other users or session will not have access to the counter.
// get the saved value or zero if not found
var count = localStorage.getItem('so-demo') || 0;
// increment the value by 1
count++;
// save the value
localStorage.setItem('so-demo', count);
// show the actual value
document.getElementById('theValue').innerHTML = count
<div id="theValue">localStorage is not allowed on stack overflow but works elsewhere</div>
The similar question had already been raised, check out this topic
The way suggested with Google Analytics out there is quite a good idea

Javascript - create text file on website

So I have a web page, and I would like to programaticly create a text file (lets say it has the words 'hello, I am a text file' in it) on a new directory on my website. The program will be in another directory on the website.
e.g.
https://www.example.com/txtbuild.html is trying to programaticly make https://www.example.com/texts/hi.txt
Is there a way to do this with HTML/Javascript?
EDIT:
I am on Github
You can't do it with HTML/Javascript alone, you need a functional language on the backend (nodejs, php, python)
You can use ActiveXObject, but it won't work in all browsers.
var fso = new ActiveXObject("Scripting.FileSystemObject");
var a = fso.CreateTextFile("c:\\testfile.txt", true);
a.WriteLine("This is a test.");
a.Close();
https://msdn.microsoft.com/en-us/library/5t9b5c0c(v=vs.84).aspx
If, when you say "JavaScript", you're referring to a node.js application running on a server, then this is possible. It doesn't have to be node though; it could be a Django site, or an ASP.Net site, doesn't matter. You can't have JS code in the browser create files on your server... the JS in the browser is executing on a client machine, and doesn't have access to the server's file system.
You could create an endpoint to which your clients could send requests that would initiate the creation of the file.
You could also allow clients to PUT or POST files to your server, but again, this is something you control from the server side of the application. Your webpage (i.e., HTML file as you put it) cannot create files on the server itself. Your server allows clients to send it files in a specific manner, and the client must adhere to those rules.
The short answer to your question is no.
The long answer is that you have the following alternatives:
Use a form on the Browser end, send the data back to the server, and then use a server-side language such as PHP to receive and save the data. No JavaScript required, but you do need server-side programming.
You can make the process more immediate by using JavaScript on the browser end to send data back to the server. This is called Ajax. You will still need server side processing, though.
Note that it is probably a very bad idea to simple accept user data and save it directly. There are two things you should consider in your development:
Always filter the incoming data against the possibility of receiving and accepting carefully crafted malicious data.
Consider storing the data in a database. Apart from being easier to manage (you don’t have to worry about filenames, for example), they can do less damage there.
You can achieve this in IE browser using the following code.
<SCRIPT LANGUAGE="JavaScript">
function WriteToFile(passForm) {
set fso = CreateObject("Scripting.FileSystemObject");
set s = fso.CreateTextFile("C:\test.txt", True);
s.writeline("HI");
s.writeline("Bye");
s.writeline("-----------------------------");
s.Close();
}
if you are looking for a goos reliable solution then better to use PHP and other server scripts.

Alternative to passing Data to JavaScript from PHP?

I have a fairly large Application and I'm currently trying to find a way around having to pass Data from PHP (User Tokens for 3rd Party API's and such) through the DOM. Currently I use data-* attributes on a single element and parse the Data from that, but it's pretty messy.
I've considered just making the contents of the element encoded JSON with all the config in, which would greatly improve the structure and effectiveness, but at the same time storing sensitive information in the DOM isn't ideal or secure whatsoever.
Getting the data via AJAX is also not so feasible, as the Application requires this information all the time, on any page - so running an AJAX request on every page load before allowing user input or control will be a pain for users and add load to my server.
Something I've considered is having an initial request for information, storing it in the Cache/localStorage along with a checksum of the data, and include the checksum for the up-to-date data in the DOM. So on every page load it'll compare the checksums and if they are different (JavaScript has out-of-date data stored in Cache/localStorage), it'll send another request.
I'd rather not have to go down this route, and I'd like to know if there are any better methods that you can think of. I can't find any alternative methods in other questions/Google, so any help is appreciated.
You could also create a php file and put the header as type javascript. Request this file as a normal javascript file. <script src="config.js.php"></script> (considering the filename is config.js.php) You can structure your javascript code and simply assign values dynamically.
For security, especially if login is required, this file can only be returned once the user is logged in or something. Otherwise you simply return a blank file.
You could also just emit the json you need in your template and assign it to a javascript global.
This would be especially easy if you were using a templating system that supports inheritance like twig. You could then do something like this in the base template for your application:
<script>
MyApp = {};
MyApp.cfg = {{cfg | tojson | safe}};
</script>
where cfg is a php dictionary in the templating context. Those filters aren't twig specific, but there to give you an idea.
It wouldn't be safe if you were storing sensitive information, but it would be easier than storing the info in local storage,

How do I write data to a file with Javascript?

I made a game with javascript using this tutorial as a base: http://html5gamedev.samlancashire.com/making-a-simple-html5-canvas-game-part-3-drawing-images/
How do I get it to write the data from the item counter (var itemCounter = 50;) to a text file named savedata.txt? I googled it, but no helpful results came up. Can someone help me?
Technically, you can create a server with nodejs [which is built with javascript]. Details can be found here
Its not possible to store the data as a file on the client.
But you can use localstorage, websql, indexeddb or simply cookies for it.
Note that all of these storages have different properties in terms of lifetime.
You could also create a blob using the blobapi and then create a dataurl and request the user to save it, using drag and drop + fileapi to read the data, this approach however will make it easy for users to modify the data.
Writing a file is posible with the new FileWriter and FileSystem APIs.
More mature solutions (not using files) have already been mentioned
Javascript does not support working with files, for data storage several options are available:
cookies
Local Storage
Server side storage

How to check if storing local shared object is allowed by the user or by the browser when in private browing mode?

I am developing a flex component in Flex3 which needs to store some data on the local disk for the future use using
var localData:Sharedobject=SharedObject.getLocal("localdata");
Today while i was working on this, eventually i had opened my chrome browser in incognito mode, so the data was not stored and i couldn't restore the data which i has saved earlier.
So i want to know is there any way to check if the local storage is allowed or not; using javascript. Javascript because i want to check it before even my component is loaded. Pls suggest me some ways to do it.
SharedObject.getLocal() throws an Error when it fails to create SO, so just listen for this error.
EDIT
If you need javascript solution you can create a simple Flash/Flex file which will try to create a SharedObject, then it can pass the result (true/false) to Javascript (using ExternalInterface).
Then you can pass the result to your main component...
JS can't access flash SharedObjects.
*EDIT 2 *
There is HTML5 localStorage, so you may want to use that one, but from your question I understood you wanted to check if Flash local storage works.

Categories

Resources