HTML Topics
- HTML Intro
- HTML Basic
- HTML Editors
- HTML CSS
- HTML Tags
- HTML Deprecated Tags
- HTML Events
- HTML Event Attributes
- HTML Global Attributes
- HTML Attributes
- abbr
- accept
- accept-charset
- accesskey
- action
- align
- alt
- archive
- as
- async
- autocapitalize
- autocomplete
- autofocus
- autoplay
- axis
- bgcolor
- border
- cellpadding
- cellspacing
- char
- charoff
- charset
- checked
- cite
- class
- classid
- codebase
- codetype
- color
- cols
- colspan
- compact
- content
- contenteditable
- controls
- coords
- crossorigin
- data
- data-*
- datetime
- declare
- default
- defer
- dir
- dirname
- disabled
- download
- draggable
- enctype
- enterkeyhint
- for
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- frame
- frameborder
- frameset
- headers
- height
- hidden
- high
- href
- hreflang
- hspace
- http-equiv
- id
- inert
- inputmode
- ismap
- kind
- label
- lang
- list
- loop
- low
- max
- maxlength
- media
- method
- min
- multiple
- muted
- name
- novalidate
- onabort
- onafterprint
- onbeforeprint
- onbeforeunload
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- oncopy
- oncuechange
- oncut
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onhashchange
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onoffline
- ononline
- onpagehide
- onpageshow
- onpaste
- onpause
- onplay
- onplaying
- onpopstate
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onsearch
- onseeked
- onseeking
- onselect
- onstalled
- onstorage
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onunload
- onvolumechange
- onwaiting
- onwheel
- open
- optimum
- pattern
- placeholder
- popover
- popovertarget
- popovertargetaction
- poster
- preload
- readonly
- rel
- required
- reversed
- rows
- rowspan
- sandbox
- scope
- selected
- shape
- size
- sizes
- span
- spellcheck
- src
- srcdoc
- srclang
- srcset
- start
- step
- style
- tabindex
- target
- title
- translate
- type
- usemap
- value
- width
- wrap
- HTML Comments
- HTML Entity
- HTML Head
- HTML Form
- HTML IndexedDB
- HTML Drag & Drop
- HTML Geolocation
- HTML Canvas
- HTML Status Code
- HTML Language Code
- HTML Country Code
- HTML Charset
- MIME Types
HTML onstorage Attribute
Photo Credit to CodeToFun
🙋 Introduction
The onstorage
attribute is a powerful feature in HTML that allows developers to associate a JavaScript function with the storage event.
The storage event is triggered when data is stored or modified in the web storage (localStorage or sessionStorage) of a web page.
This attribute provides a way to execute custom JavaScript code in response to changes in the storage data.
🎯 Purpose of onstorage
The primary purpose of the onstorage
attribute is to enable developers to respond to changes in the web storage and take appropriate actions.
This can be particularly useful for scenarios where you need to synchronize data between different browser tabs or windows, or when you want to update the user interface based on changes in the stored data.
💎 Values
The onstorage
attribute accepts a JavaScript function as its value. This function is called when the storage event is triggered.
It should be defined in the script or linked script file associated with the HTML document. Here's a basic example:
<script>
// Define the storage event handler function
function handleStorageEvent(event) {
console.log("Storage event triggered:", event);
// Perform custom actions based on the event
}
</script>
<!-- Apply the onstorage attribute to an element -->
<body onstorage="handleStorageEvent(event)">
<!-- Your HTML content goes here -->
</body>
🧠 How it Works
In this example, the onstorage
attribute is applied to the body element, and it is set to call the handleStorageEvent function when the storage event occurs.
🔄 Dynamic Values with JavaScript
You can dynamically set the onstorage
attribute using JavaScript. This allows you to change the event handler function based on certain conditions or user interactions. Here's a brief example:
<script>
// Dynamically set the onstorage attribute
document.body.onstorage = function(event) {
console.log("Dynamic storage event handler:", event);
// Perform dynamic actions based on the event
};
</script>
🧠 How it Works
In this script, the onstorage
attribute of the body element is dynamically set to a new function. This flexibility can be beneficial when you need to adapt the event handling behavior dynamically.
🏆 Best Practices
- Use the
onstorage
attribute when you need to respond to changes in web storage data and perform custom actions accordingly. - Ensure that the specified function for onstorage is defined and handles the storage event appropriately.
- Be cautious with the logic inside the event handler to avoid potential performance issues, especially if dealing with large amounts of data.
🎉 Conclusion
The onstorage
attribute provides a mechanism for developers to respond to changes in web storage, allowing for dynamic and synchronized behavior across browser tabs or windows.
By understanding and utilizing this attribute effectively, you can create more interactive and responsive web applications.
👨💻 Join our Community:
Author
For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.
Buy me a coffee to make codetofun.com free for everyone.
Buy me a Coffee
If you have any doubts regarding this article (HTML onstorage Attribute), please comment here. I will help you immediately.