Vue.js Local Storage
home
Run
screen_rotation
fullscreen
cloud_download
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> </head> <body> <div id="app"> <p>Local Data = {{myLocalData}}</p> <button @click="mySetFunction()">Set Local Storage Data</button><br><br> <button @click="myGetFunction()">Get Local Storage Data</button><br><br> <button @click="myDeleteFunction()">Remove Local Storage Data</button> <p>Once Value is set in local storage Reload this page to see locally stored value.</p> </div> <script> new Vue({ el: '#app', data: { myStr:'Welcome to Tutorialsplane.com!', myLocalData: localStorage.getItem('myItem') }, methods:{ mySetFunction: function () { localStorage.setItem('myItem', this.myStr); }, myGetFunction: function () { this.myLocalData = localStorage.getItem('myItem'); }, myDeleteFunction: function () { localStorage.removeItem('myItem'); this.myLocalData = localStorage.getItem('myItem'); } } }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script> </head> <body> <div id="app"> <p>Local Data = {{myLocalData}}</p> <button @click="mySetFunction()">Set Local Storage Data</button><br><br> <button @click="myGetFunction()">Get Local Storage Data</button><br><br> <button @click="myDeleteFunction()">Remove Local Storage Data</button> <p>Once Value is set in local storage Reload this page to see locally stored value.</p> </div> <script> new Vue({ el: '#app', data: { myStr:'Welcome to Tutorialsplane.com!', myLocalData: localStorage.getItem('myItem') }, methods:{ mySetFunction: function () { localStorage.setItem('myItem', this.myStr); }, myGetFunction: function () { this.myLocalData = localStorage.getItem('myItem'); }, myDeleteFunction: function () { localStorage.removeItem('myItem'); this.myLocalData = localStorage.getItem('myItem'); } } }); </script> </body> </html>
Copyrights@tutorialsplane.com