How to use and purpose of localstorage in javascript
How to use and purpose of localstorage in javascript
Hello everyone, in this post we will examine how to solve the "How to use and purpose of localstorage in javascript" programming puzzle.
The localStorage properties allow saving key/value pairs in a web browser. You can access it from one page to another page like a session. But it is stored in the browser. You can set and get the value, and also remove the item from localStorage.-
Show modal using localStorage in javascript
<!-- set localStorage item with key openModal and value #addEventModal --> <!-- index.html --> <a id="addEventBtn" href="main.html"> Add Event </a> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script> $(document).ready(function(){ $('#addEventBtn').on('click', function(e){ e.preventDefault(); localStorage.setItem('openModal', '#addEventModal'); let href = e.target.href; window.location.replace(href); }); }) </script> <!-- Get the localStorage with getItem method and show modal if it is not null and after that remove item from storage --> <!-- main.html --> <div class="modal" id="addEventModal"> <div class="modal-dialog "> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">Modal title</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> <script> var modalId = localStorage.getItem('openModal'); if(modalId != null){ $(modalId).modal("show"); //use modal with id addEventModal localStorage.removeItem('openModal'); } </script>
It will help you to set the localStorage with modal id in one page using javascript and will show modal to another page after the redirection and remove the item after showing the modal so that on next visit modal did not show.
setItem in one page and show modal, remove localStorage item using removeItem after showing the modal
If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.
Don't forget to share this article! Help us spread the word by clicking the share button below.
We appreciate your support and are committed to providing you valuable and informative content.
We are thankful for your never ending support.
Random Code Snippet Queries: Jquery
- Ajax for multiple form
- Jquery.validate.min.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'mode')
- How to find closest upper element and append html to below it in jquery
- How to remove Choose File button in jquery
- Show and hide target element on click button using javascript/jquery
- Ajax done fail ajaxcomplete in not a function
- Validate form using jQuery
- Show loading icon on click submit button in jQuery
- Enable click event on appended element using jQuery
- Mixed Content: The page at 'https://w3codegenerator.com/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint
- Uncaught TypeError: $.ajax is not a function
- How to check ajax request is completed in jQuery
- Jquery-3.6.0.min.js CDN link
- How to check object is empty or not in jQuery
- How to create read more in jquery
- How to validate input type file size in jQuery for multiple records
- Execute function after Ajax call is complete
- Get the href link on click anchor in javascript
- Preview image in BLOB URL format on choose file in jQuery
- Add and remove input fields on click button using jQuery
- Uncaught TypeError: $.ajaxSetup is not a function
- (index):128 Uncaught TypeError: MobileNumberVal.test is not a function
- How to get closest form input value in jQuery
- Preview image in base64 format using jQuery on change input file
- How to pass javascript variable to laravel route on ajax call