Jquery, HTML5 LocalStorage and DOM manipulation

On a recent web app project that we’re building here at kc web design kent we needed to utilise HTML5 localStorage quite a lot. With the complexities of the forms we were building we also had to manipulate the DOM a lot and create whole batches of new form fields based on user input. One of the inherent problems of creating or cloning form fields using Jquery is that those new form fields aren’t accessible in the normal way. You have to use Jquery .live events to reference newly created DOM elements as click functions will not work.

Local storage issues

While building this web app at kc web design kent we wanted to use HTML5 local storage to be able to keep a reference of all data locally so that the web app could be used in off-line situations. Local storage seems like the obvious choice but we ran into problems with form fields that were created by the DOM. Local storage just would not see these new fields and no matter what we tried we couldn’t get the fields to save. There isn’t a lot of detailed information around on local storage problems like this and after a few hours on Google we came up empty. So, we decided to get our heads together at kc web design kent and build some kind of work around.

A kc web design kent fix!

After trying a few failed attempts to force local storage to see the newly created fields we decided to take a different approach and use Jquery to ‘listen’ for any changes on form fields created in the DOM and then force them to save to local storage with the correct name and value. We tried a few complicated methods but found the best way was to keep it simple. If you come across the same problem then maybe this will help. Just set up a global event to listen for all form fields and then when they change manually set the local storage values. Seems too simple to work, but it does.

$("form").on('change', function(e) { 
 var $this = e.target;
 localStorage.setItem(e.target.name, e.target.value);
Paul Ledbrook

If you have a new project or existing website that needs improvement, email us or call 0845 3631162 , we’d love to hear from you.

What’s new?

The Evolution of Icons in UI Design: What’s Next?

When it comes to user experience and UI design, icons are an essential element that serves as a visual aid to communicate information. They are the backbone of a well-designed interface, acting as a bridge between users and technology. Icons have come a long way since their humble beginnings, evolving from static images to interactive...

The Power of Intuition in UI Design

How to Effectively Use Your Gut Instincts Trusting your design ‘gut’ could be tricky. On one hand, as a UI designer, you are expected to follow proven UI design principles and rely on data-driven decisions. On the other hand, intuition may lead to innovative and unexpected solutions that can truly set your product apart from...

Dark Mode vs. Light Mode: A Comprehensive Guide for UI design

In recent years, the topic of dark mode vs. light mode in UI design has sparked heated discussions and debates among designers and users alike. While some argue for the sleekness and modernity of dark mode, others swear by the clarity and simplicity of light mode. But which one is truly better for user experience...

This is What a UI Designer Can Learn from Urban Planning: A Comprehensive Guide

When it comes to design, there are many areas that can influence and inspire new ideas. One of these areas is urban planning. While the two may seem vastly different, there are actually many valuable lessons that a UI designer can learn from the world of urban planning. Good design is subjective, contextual, and intentional....

Why Intuitive Technology Is the Future of UI Design

If you’ve ever used a piece of technology that seamlessly integrated into your daily routine, then you know what it means to experience great user experience (UX) and UI design. The founder of StreamAlive, a leading tech company, believes that good technology shouldn’t feel like technology at all. It should simply feel like a natural...

Latest Inspiring Web Design Trends And Techniques For 2024

The web design landscape for 2024 is set to be a dynamic and revolutionary one, with a blend of evolutionary and reactionary trends. From sci-fi-inspired design to adaptive headers and teleprompter typography, the upcoming year will witness a diverse range of innovative approaches. Additionally, bold and experimental typography, dark mode design, 3D elements, virtual reality...

The Unrivaled Excellence of our Web Design Agency Canterbury

Unveiling the Best Web Design Agency Canterbury In the bustling digital landscape, where every business vies for online supremacy, only a select few ascend to the zenith. Canterbury, a city steeped in history, is also home to unrivaled web design excellence. A top-rated web design agency Canterbury, kc web design Ltd, has been a beacon...

10 Things to Consider When Designing a High-Converting web app UI design

Your web app’s user interface (UI) is the first thing that users will see and interact with, so it’s important to make a good impression. A well-designed web app UI design can help you attract and retain users, and even increase conversions. Here are 10 things to consider when designing a high-converting web app UI...

How to Use Web Design to Improve User Experience

Introduction Your website is your online storefront. It’s the first impression that potential customers will have of your business, so it’s important to make sure it’s designed in a way that is user-friendly and easy to navigate. Good web design can help you improve your user experience (UX) in a number of ways. It can...

kc web design ltd