screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>Vue js Store Object to Session Storage</h3> <div> <label>Name:</label> <input type="text" v-model="name"> </div> <div> <label>Age:</label> <input type="number" v-model="age"> </div> <div> <label>Email:</label> <input type="email" v-model="email"> </div> <button @click="saveObject">Save Object</button> <div id="toast" class="toast">Data saved successfully!</div> </div> <script type="module"> const app = new Vue({ el: "#app", data: { name: '', age: null, email: '', savedObjects: [] }, methods: { saveObject: function () { // Create a new object with the user input var myObject = { name: this.name, age: this.age, email: this.email }; // Convert the object into a JSON string var jsonString = JSON.stringify(myObject); // Store the JSON string in the session storage var index = sessionStorage.length + 1; sessionStorage.setItem('myObject' + index, jsonString); // Add the saved object to the list of saved objects this.savedObjects.push(myObject); // Clear the user input this.name = ''; this.age = null; this.email = ''; // Display the toast message var toast = document.getElementById("toast"); toast.style.display = "block"; setTimeout(function () { toast.style.display = "none"; }, 5000); } } }) </script> <style> #app { display: flex; flex-direction: column; align-items: center; } div { margin: 10px 0; } label { font-weight: bold; } input[type="text"], input[type="number"], input[type="email"] { padding: 5px; border: 1px solid #ccc; border-radius: 5px; width: 200px; font-size: 14px; } button { padding: 8px 16px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin-top: 10px; } button:hover { background-color: #0062cc; } .toast { position: fixed; bottom: 20px; right: 20px; background-color: #333; color: #fff; padding: 16px; border-radius: 5px; display: none; z-index: 999; } </style> </body> </html>