JavaScript Create File Object From Local Path
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this article we will show you the solution of JavaScript create file object from local path, in an HTML file, if we submit a form, we can save the data using JavaScript.
The data stored in localStorage never expires. localStorage object local storage is a way to store key-value pairs in a local server.
It only stores strings.
The key and values are stored in localStorage.
The syntax of the localStorage object is,
localStorage.setItem(key, value);
Step By Step Guide On JavaScript Create File Object From Local Path :-
In below example, we will create serialized and deserialized file object from a local path.
Let us see the code first.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript create file object from local path </title>
<style>
body {
font-family : 'Lucida Sans', Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> JavaScript create file object from local path </h3>
<script>
let myObj = {
"firstname" : "Thomas" ,
"lastname" : "Evans" ,
"age" : 30 ,
"city" : "london" ,
"gender" : "male"
};
let myObj_serialized = JSON.stringify(myObj)
localStorage.setItem("myObj", myObj_serialized) ;
console.log(myObj_serialized)
let myObj_deserialized = JSON.parse(localStorage.getItem("myObj")) ;
console.log(myObj_deserialized) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Create an object first.
- First using JSON.stringify ( ) to serialized the object.
- Using localStorage.setItem ( ) to store the key pair value .
- Using console.log() to display the serialized object.
- Now using JSON.parse ( ) to deserialized the object.
- Using localStorage.setItem ( ) to store the key pair value .
- Using console.log() to display the deserialized object.
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to create file object from local path in JavaScript.
I hope this article on JavaScript create file object from local path helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
