Sunday, June 28, 2026

Data Transfer Java Script using Local Storage

Page 1: index.html


<!DOCTYPE html>
<html>
<head>
    <title>Page 1</title>
</head>
<body>

<h2>Student Information</h2>

<label>Enter Name:</label>
<input type="text" id="txtName">
<br><br>

<button onclick="sendData()">Next Page</button>

<script>
function sendData() {
    var name = document.getElementById("txtName").value;

    // Save data in Local Storage
    localStorage.setItem("StudentName", name);

    // Open second page
    window.location.href = "result.html";
}
</script>

</body>
</html>

Page 2: result.html


<!DOCTYPE html>
<html>
<head>
    <title>Page 2</title>
</head>
<body>

<h2>Student Details</h2>

<p>
    Name :
    <span id="displayName"></span>
</p>

<script>
// Get data from Local Storage
var name = localStorage.getItem("StudentName");

// Display data
document.getElementById("displayName").innerHTML = name;
</script>

</body>
</html>

Output

Page 1


Student Information

Enter Name: [Nilesh Gupta]

[Next Page]

⬇️ Click Next Page

Page 2


Student Details

Name : Nilesh Gupta

How It Works

User enters a name on index.html.

JavaScript stores the value using:


localStorage.setItem("StudentName", name);

The browser opens result.html.

The second page retrieves the value:


localStorage.getItem("StudentName");

The name is displayed on the page.

This is one of the simplest ways to transfer data between HTML pages using only JavaScript, without any server-side code or database.

What is localStorage in JavaScript? Data Transfer B/W one page to another page

What is `localStorage` in JavaScript?

localStorage is a built-in JavaScript object that allows you to store data in the user's web browser as key-value pairs. The stored data remains available even after the browser is closed and reopened, until it is manually deleted or cleared.

Features of `localStorage`

Stores data in the browser.
Data is saved as string values.
Data remains available even after refreshing or closing the browser.
Data is stored only for the same website (same origin).
No server or database is required.

Syntax

Store Data


localStorage.setItem("key", "value");

Retrieve Data


var value = localStorage.getItem("key");

Remove One Item


localStorage.removeItem("key");

Remove All Items


localStorage.clear();

Example 1: Store Data


<!DOCTYPE html>
<html>
<head>
    <title>LocalStorage Example</title>
</head>
<body>

<input type="text" id="txtName" placeholder="Enter Name">
<button onclick="saveData()">Save</button>

<script>
function saveData() {
    var name = document.getElementById("txtName").value;

    localStorage.setItem("StudentName", name);

    alert("Data Saved Successfully");
}
</script>

</body>
</html>

Example 2: Display Stored Data


<!DOCTYPE html>
<html>
<head>
    <title>Display Data</title>
</head>
<body>

<h2>Stored Name</h2>

<p id="result"></p>

<script>
var name = localStorage.getItem("StudentName");

document.getElementById("result").innerHTML = name;
</script>

</body>
</html>

Example 3: Remove Data


localStorage.removeItem("StudentName");

Example 4: Clear All Data


localStorage.clear();

Output

Before Saving


Enter Name : Nilesh Gupta

[Save]

After Displaying


Stored Name

Nilesh Gupta

Common `localStorage` Methods

Method	Description
`setItem(key, value)`	Stores data
`getItem(key)`	Retrieves stored data
`removeItem(key)`	Removes a specific item
`clear()`	Removes all stored data
`key(index)`	Returns the key at the given index
`length`	Returns the number of stored items

Advantages

Easy to use.
No database or server required.
Data persists after the browser is closed.
Useful for user preferences, themes, shopping carts, and small amounts of application data.

Limitations

Stores only strings (objects must be converted using JSON.stringify() and JSON.parse()).
Typical storage limit is around 5–10 MB, depending on the browser.
Data is not secure—users can view and modify it through the browser's developer tools.
It should not be used to store sensitive information such as passwords or payment details.

localStorage is commonly used in front-end web applications to save small amounts of data locally without requiring a server or database.

Java script radio button event programming

JavaScript Radio Button Example with Result

This example allows the user to select a gender using radio buttons and displays the selected value when the button is clicked.

HTML + JavaScript Code


<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Radio Button Example</title>

    <script>
        function showResult() {

            var gender = "";

            if (document.getElementById("male").checked) {
                gender = "Male";
            }
            else if (document.getElementById("female").checked) {
                gender = "Female";
            }
            else if (document.getElementById("other").checked) {
                gender = "Other";
            }
            else {
                gender = "Please select a gender.";
            }

            document.getElementById("result").innerHTML = gender;
        }
    </script>

</head>

<body>

    <h2>JavaScript Radio Button Example</h2>

    <input type="radio" id="male" name="gender"> Male <br><br>

    <input type="radio" id="female" name="gender"> Female <br><br>

    <input type="radio" id="other" name="gender"> Other <br><br>

    <button onclick="showResult()">Show Result</button>

    <h3>Selected Gender:</h3>
    <p id="result"></p>

</body>
</html>

Output

Before Clicking Button


( ) Male
( ) Female
( ) Other

[ Show Result ]

Example 1

If the user selects Male:


Selected Gender:
Male

Example 2

If the user selects Female:


Selected Gender:
Female

Example 3

If no option is selected:


Selected Gender:
Please select a gender.

Learning Points

input type="radio" creates a radio button.
Radio buttons with the same name belong to the same group.
.checked returns true if a radio button is selected.
document.getElementById() accesses an HTML element by its ID.
.innerHTML displays the selected value in the page.

This is a simple and beginner-friendly JavaScript radio button example suitable for students learning HTML and JavaScript.

Java Script Check box programming

Here's a simple JavaScript Checkbox Example with output.

Example 1: Check if Checkbox is Selected


<!DOCTYPE html>
<html>
<head>
    <title>JavaScript Checkbox Example</title>
</head>
<body>

<h2>Checkbox Example</h2>

<input type="checkbox" id="chkAgree"> I Agree to the Terms & Conditions
<br><br>

<button onclick="checkStatus()">Submit</button>

<p id="result"></p>

<script>
function checkStatus() {
    var checkbox = document.getElementById("chkAgree");

    if (checkbox.checked) {
        document.getElementById("result").innerHTML =
        "✅ Checkbox is Checked.";
    }
    else {
        document.getElementById("result").innerHTML =
        "❌ Checkbox is Not Checked.";
    }
}
</script>

</body>
</html>

Result

Case 1: Checkbox Checked


✅ Checkbox is Checked.

Case 2: Checkbox Not Checked


❌ Checkbox is Not Checked.

Example 2: Multiple Checkboxes


<!DOCTYPE html>
<html>
<head>
    <title>Multiple Checkbox Example</title>
</head>
<body>

<h2>Select Your Skills</h2>

<input type="checkbox" id="html"> HTML <br>
<input type="checkbox" id="css"> CSS <br>
<input type="checkbox" id="js"> JavaScript <br><br>

<button onclick="showSkills()">Show Selected Skills</button>

<p id="output"></p>

<script>
function showSkills() {

    var result = "";

    if(document.getElementById("html").checked)
        result += "HTML ";

    if(document.getElementById("css").checked)
        result += "CSS ";

    if(document.getElementById("js").checked)
        result += "JavaScript ";

    if(result == "")
        result = "No Skill Selected";

    document.getElementById("output").innerHTML = result;
}
</script>

</body>
</html>

Result

If HTML and JavaScript are selected:


HTML JavaScript

If no checkbox is selected:


No Skill Selected

Example 3: Checkbox Validation


<!DOCTYPE html>
<html>
<head>
    <title>Checkbox Validation</title>
</head>
<body>

<input type="checkbox" id="terms">
I accept the Terms & Conditions
<br><br>

<button onclick="validateForm()">Register</button>

<script>
function validateForm() {

    if(document.getElementById("terms").checked)
    {
        alert("Registration Successful");
    }
    else
    {
        alert("Please accept the Terms & Conditions.");
    }

}
</script>

</body>
</html>

Result

Checkbox Status	Output
✔ Checked	Registration Successful
✘ Not Checked	Please accept the Terms & Conditions.

These examples are suitable for beginners learning JavaScript and demonstrate how to read a checkbox's checked property, work with multiple checkboxes, and validate user input.

Example 2: Validate Name, Email, and Mobile Number

<!DOCTYPE html>

<html>

<head>

function validate() {

var name = document.getElementById("txtName").value;

var email = document.getElementById("txtEmail").value;

var mobile = document.getElementById("txtMobile").value;

if (name == "") {

alert("Please enter your name.");

return;

}

if (email == "") {

alert("Please enter your email.");

return;

}

if (!email.includes("@")) {

alert("Invalid Email Address.");

return;

}

if (mobile.length != 10) {

alert("Mobile number must be 10 digits.");

return;

}

alert("Form Submitted Successfully!");

}

</script>

</head>

<body>

<h2>Student Registration</h2>

Name:

Email:

Mobile:

<button onclick="validate()">Submit</button>

</body>

</html>

Below is a simple example of saving data from HTML text boxes to a SQL Server database using HTML + jQuery + ASP.NET Web API (C#).

Below is a simple example of saving data from HTML text boxes to a SQL Server database using HTML + jQuery + ASP.NET Web API (C#).

Note: jQuery cannot connect directly to SQL Server. It sends data to a server-side API, and the API inserts the data into SQL Server.

1. SQL Server Table


CREATE TABLE Student
(
    StudentID INT IDENTITY(1,1) PRIMARY KEY,
    Name NVARCHAR(100),
    Email NVARCHAR(100),
    Mobile NVARCHAR(15)
);

2. HTML


<!DOCTYPE html>
<html>
<head>
    <title>Save Data</title>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>

<h2>Student Registration</h2>

Name :
<input type="text" id="txtName"><br><br>

Email :
<input type="text" id="txtEmail"><br><br>

Mobile :
<input type="text" id="txtMobile"><br><br>

<input type="button" id="btnSave" value="Save">

<div id="msg"></div>

<script>

$("#btnSave").click(function () {

    var student = {
        Name: $("#txtName").val(),
        Email: $("#txtEmail").val(),
        Mobile: $("#txtMobile").val()
    };

    $.ajax({
        url: "/api/student/save",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify(student),

        success: function (response) {
            $("#msg").html("Record Saved Successfully.");
        },

        error: function () {
            $("#msg").html("Error while saving record.");
        }
    });

});

</script>

</body>
</html>

3. C# Model


public class Student
{
    public string Name { get; set; }
    public string Email { get; set; }
    public string Mobile { get; set; }
}

4. Web API Controller


using System.Data.SqlClient;
using System.Configuration;
using System.Web.Http;

public class StudentController : ApiController
{
    [HttpPost]
    [Route("api/student/save")]

    public IHttpActionResult Save(Student obj)
    {
        SqlConnection con = new SqlConnection(
            ConfigurationManager.ConnectionStrings["dbcon"].ConnectionString);

        SqlCommand cmd = new SqlCommand(
            "INSERT INTO Student(Name,Email,Mobile) VALUES(@Name,@Email,@Mobile)", con);

        cmd.Parameters.AddWithValue("@Name", obj.Name);
        cmd.Parameters.AddWithValue("@Email", obj.Email);
        cmd.Parameters.AddWithValue("@Mobile", obj.Mobile);

        con.Open();
        cmd.ExecuteNonQuery();
        con.Close();

        return Ok("Saved Successfully");
    }
}

5. Web.config Connection String


<connectionStrings>
  <add name="dbcon"
       connectionString="Data Source=SERVERNAME;
                         Initial Catalog=CollegeDB;
                         Integrated Security=True"
       providerName="System.Data.SqlClient"/>
</connectionStrings>

How It Works


HTML TextBox
      │
      ▼
jQuery AJAX
      │
      ▼
ASP.NET Web API
      │
      ▼
SQL Server Database

Output

Suppose the user enters:

Name: Nilesh Gupta
Email: nilesh@gmail.com
Mobile: 9876543210

After clicking Save, the following record is inserted into SQL Server:

StudentID	Name	Email	Mobile
1	Nilesh Gupta	nilesh@gmail.com	9876543210

Data save in sql server table using Java Script

JavaScript running in a browser cannot directly insert records into a SQL Server database for security reasons. The correct architecture is:

HTML Form → JavaScript → Server-side API (ASP.NET, PHP, Node.js, Java, etc.) → SQL Server

If you want to learn the process, here is a complete example using HTML, JavaScript, and an ASP.NET Web API.

Step 1: HTML Page


<!DOCTYPE html>
<html>
<head>
    <title>Insert Record</title>
</head>
<body>

<h2>Student Registration</h2>

Name :
<input type="text" id="txtName"><br><br>

Email :
<input type="text" id="txtEmail"><br><br>

<input type="button" value="Save" onclick="saveData()">

<p id="msg"></p>

<script>
function saveData() {

    var name = document.getElementById("txtName").value;
    var email = document.getElementById("txtEmail").value;

    if(name=="" || email=="")
    {
        alert("Please fill all fields.");
        return;
    }

    fetch("https://localhost:5001/api/student", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            Name: name,
            Email: email
        })
    })
    .then(response => response.text())
    .then(data => {
        document.getElementById("msg").innerHTML = data;
    })
    .catch(error => {
        console.log(error);
    });

}
</script>

</body>
</html>

Step 2: SQL Server Table


CREATE TABLE Student
(
    Id INT IDENTITY(1,1) PRIMARY KEY,
    Name VARCHAR(100),
    Email VARCHAR(100)
)

Step 3: ASP.NET C# API


[HttpPost]
public string Post(Student s)
{
    SqlConnection con = new SqlConnection(
    "Server=.;Database=CollegeDB;Trusted_Connection=True;");

    con.Open();

    SqlCommand cmd = new SqlCommand(
    "INSERT INTO Student(Name,Email) VALUES(@Name,@Email)", con);

    cmd.Parameters.AddWithValue("@Name", s.Name);
    cmd.Parameters.AddWithValue("@Email", s.Email);

    cmd.ExecuteNonQuery();

    con.Close();

    return "Record Saved Successfully";
}

Data Flow


HTML TextBox
      │
      ▼
JavaScript
(fetch API)
      │
      ▼
ASP.NET Web API
      │
      ▼
SQL Server Database

Important Note

❌ This is not possible:


// JavaScript cannot connect directly to SQL Server
var con = new SqlConnection(...);

Browsers do not allow direct database connections because it would expose your database credentials to anyone using the website.

If you are teaching Web Technology, I can also provide a complete CRUD (Insert, Update, Delete, Select) project using:

HTML
CSS
JavaScript
ASP.NET Web API
SQL Server

with source code and database scripts.

Sunday, June 28, 2026

Page 1: index.html

Page 2: result.html

Output

Page 1

Page 2

How It Works

What is localStorage in JavaScript?

Features of localStorage

Syntax

Store Data

Retrieve Data

Remove One Item

Remove All Items

Example 1: Store Data

Example 2: Display Stored Data

Example 3: Remove Data

Example 4: Clear All Data

Output

Before Saving

After Displaying

Common localStorage Methods

Advantages

Limitations

JavaScript Radio Button Example with Result

HTML + JavaScript Code

Output

Before Clicking Button

Example 1

Example 2

Example 3

Learning Points

Example 1: Check if Checkbox is Selected

Result

Example 2: Multiple Checkboxes

Result

Example 3: Checkbox Validation

Result

1. SQL Server Table

2. HTML

3. C# Model

4. Web API Controller

5. Web.config Connection String

How It Works

Output

Step 1: HTML Page

Step 2: SQL Server Table

Step 3: ASP.NET C# API

Data Flow

Important Note

What is `localStorage` in JavaScript?

Features of `localStorage`

Common `localStorage` Methods