HTML5 Client-side Storage

Mar 19, 20110 likes719 views

This document discusses client-side storage options in HTML5, including Web SQL, localStorage, and sessionStorage. Web SQL allows persistent storage of large structured data like strings, numbers, and dates but is only supported by Safari and Chrome. localStorage also allows persistent storage across windows but is supported by more browsers. sessionStorage stores data separately across windows and is only maintained for the browser session.

HTML5 Client-side Storage
That’s hot.

Andrew Hedges
a@tapulous.com
@segdeha

The web is stateless.

http://reinep.?les.wordpress.com/2011/02/julian-assange-wikileaks.jpg

http://www.toothpastefordinner.com/060606/whats-better-than-a-cookie.gif

If only we could store stuff on the client-side.

http://farm6.static.?ickr.com/5050/5369917493_111ef869bd.jpg

Web SQL

http://yourdumpsterrentals.com/images/Dump-Truck.jpg

localStorage

http://c1.gas2.org/?les/2008/04/hondacivicgx.jpg

sessionStorage

http://dvice.com/pics/smart-car.jpg

Web SQL localStorage sessionStorage

Safari 3.2 Safari 4
Chrome 4 Chrome 4
Opera 11 Opera 11
iOS 3.2 iOS 3.2
Android 2.1 Android 2.1
Opera Mini 5 IE 8
Firefox 3.5

IndexDB
Firefox 4

Sources: http://www.html5rocks.com/features/storage & http://caniuse.com/

Web SQL localStorage sessionStorage

Persistent Persistent Session-based
Asynchronous Synchronous Synchronous
Typed data String data String data
strings key/value pairs key/value pairs
numbers Want to access Want to keep
dates data across data separate
Large amounts of windows across windows
structured data

Source: http://caniuse.com

Obligatory “we’re hiring” slide.
tapulous.com /jobs

This document provides an overview of HTML5 API support in browsers. It discusses features such as forms, video, audio, drag and drop, canvas, geolocation, web storage, app cache, web workers, and server sent events. For each feature, it provides examples codes and lists browser support. It notes that some features like web workers are not supported in Internet Explorer. The document aims to help understand how HTML5 features are implemented across different browsers and on mobile.

HTML5 Introductiondynamis

This document provides an overview and introduction to HTML5. It begins with a discussion of browser market share statistics and the birth of HTML5 by the WHATWG organization. It then outlines the wide range of new HTML5 markup, elements, events, APIs and technologies including forms, canvas, web sockets, and more. The remainder of the document discusses the status and implementation of these HTML5 features across modern browsers like Firefox, and provides references to HTML5 test suites, specifications, implementations and demos.

HTML5: The Good, the Bad, and Everything In BetweenMicrosoft Developer Network (MSDN) - Belgium and Luxembourg

your browser, my storageFrancesco Fullone

This document discusses approaches for storing data on the client side beyond a page refresh without transmitting it to the server. It reviews the history of cookies, Flash cookies, Gears, and other approaches. It then summarizes modern approaches like Application Cache, Web Storage, Web SQL Database, IndexedDB, and the File API which allow persistent local storage on the client. It concludes with tips for using these storage options and libraries to help manage offline data.

Your browser, your storage (extended version)Francesco Fullone

Change by HTML5dynamis

The document summarizes key features of HTML5 including updated markup, forms, multimedia elements, APIs, and specifications. It discusses the evolution of HTML in an incremental way to ease authoring of web applications. Specific HTML5 features covered include forms, Canvas, WebSockets, and APIs for drag-and-drop, geolocation, offline events, and more. Browser support for HTML5 is also addressed.

The Mobile Web - HTML5 on mobile devicesWesley Hales

HTML5 & Web PlatformSwapSkills

HTML5 and Beyonddynamis

This document is a presentation on HTML5 and beyond given by Tomoya Asai at JSiSE at Hokkaido University. The presentation covers the current state and future of HTML5, browsers, JavaScript APIs, and new web technologies. It provides examples and references to specifications, browser implementations, and demos related to HTML5 features such as semantic markup, forms, canvas, WebSockets, geolocation, and more.

In-browser storage and meJason Casden

HTML5 Webinar - Mind Storm SoftwareRomin Irani

WP7, Droid, iPhone, Oh my!Chris Hardy

This document summarizes Chris Hardy's presentation on mobile development platforms. He discussed Windows Phone 7, MonoTouch for iOS, and MonoDroid for Android. He covered code reuse across platforms using libraries like Json.Net and FlickrNet. He demonstrated a Twitter app built with each platform. Key takeaways included strategies for porting code between platforms and leveraging common .NET APIs while working around platform limitations.

Krug Fat ClientPaul Klipp

The document discusses the evolution of web applications from thin clients with fat servers to more balanced architectures. New browser technologies like HTML5, faster JavaScript engines, local storage, and offline capabilities allow more processing to be done locally on the client. This enables richer interfaces, offline usage, and more balanced work distribution between the client and server. It provides examples of how a web application may utilize these new capabilities, such as storing data locally and caching interfaces while communicating with a server via JSON.

Top 10 HTML5 Features for Oracle Cloud DevelopersBrian Huff

This document discusses top HTML5 features for Oracle Cloud developers. It begins with an introduction to various Oracle Cloud services that use HTML5 extensively, such as Oracle Sites Cloud Service. It then discusses why HTML5 is important for cloud development due to its wide acceptance, rapid development cycles, and cheaper hosting model. The document outlines the top 10 HTML5 features developers should know, including semantic HTML, local storage, geolocation, OAuth2, CORS, advanced forms, WebSockets, WebWorkers, built-in audio/video support, and custom DOM elements. It provides details and examples for each feature.

Keypoints html5dynamis

HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones

PhoneGap allows developers to build mobile apps using HTML, CSS and JavaScript instead of relying on platform-specific languages like Objective-C or Java. The document discusses PhoneGap's capabilities and advantages, including writing apps once that run on multiple platforms, using web technologies that are widely known by developers, and leveraging growing browser capabilities on mobile through HTML5. It also outlines PhoneGap's APIs, tools, libraries, and community to help developers get started building cross-platform mobile apps.

HTML5 and web platformdynamis

html5 an introductionvrt-medialab

Deview 2013 mobile browser internals and trends_20131022NAVER D2

The document discusses browser internals and trends related to mobile browsers. It provides an overview of the major rendering engines including WebKit, Blink, and Chromium. It then focuses on specifics of Android's WebView and how it has transitioned to using the Chromium engine. Finally, it describes the multi-process architecture of Chromium which separates rendering and browser components across multiple processes for improved stability.

Html 5 boot campLaurie Young

Local storageAdam Crabtree

This document provides an overview of HTML5 APIs for client-side storage including localStorage, sessionStorage, indexedDB, web SQL database, cache manifests, and offline detection. It describes their purposes, browser support, APIs, and examples. The key points are that these APIs allow storing data locally, minimize HTTP requests, maintain functionality when offline, and save user preferences across browser sessions. The document provides details on each technology's methods, properties, events, and examples of real-world uses.

Browser Horror StoriesEC-Council

In this talk we will demonstrate and unveil the latest developments on browser specific weaknesses including creative new mechanisms to compromise confidentiality, successfully perform login and history detection, serve mixed content, deliver malicious ghost binaries without a C&C server, exploit cache / timing side channels to extract secrets from third-party domains and leverage new HTML5 features to carry out more stealthy attacks. This is a fast-paced practical presentation with live demos that will challenge your knowledge of the Same Origin Policy and push the limits of what is possible with today’s web clients. Topics will include: Current XSS filter bypass for IE & Chrome. Same Origin Policy timing attacks on Chrome. Data URI malware with spoofed URLs and ‘download’ attribute. HTML5 drag & drop exploitation. History stealing attacks. Clipboard stealing attacks. Cross-domain hijacking attacks with flash content sniffing, Blob URLs and SVGs. Spoofing URL address bars on modern browsers. Advanced browser encoding quirks and exploitation techniques.

サーバー?クライアントのボトルネック調査と高速化Sugawara Genki

Women in Automation: Career Development & Leadership in AutomationUiPathCommunity

The month of March is a month when we focus on the women in our community: their expertise and their achievements. But also their potential for guidance and mentorship as we look to find role models and help our entire community reach its maximum potential, in a gender diverse and inclusive environment. Join us on March 19 for a first hand story on starting an automation career and leadership orientation as a woman expert in the automation field. Agenda: Choosing a career in automation as a woman, despite having a strong background in core software development How a strong background in core development can be leveraged to build a career in automation/digital transformation Choosing a technical role in automation rather than non-technical positions as a woman Leading teams as a woman in Turkey’s tech industry How professionals from fields other than computer engineering (both STEM and non-STEM) can transition into automation careers Mentoring professionals from different fields in their automation careers We are honored to have with us one of best women in automation advocates and professionals in Turkey: ??? Kardelen Cihangir, Technical Team Lead @VBM Turkey. ? If you have any questions or feedback, please refer to the "Women in Automation 2025" dedicated Forum thread. You can find there extra details and updates.

"AI-Driven Automation for High-Performing Teams: Optimize Routine Tasks & Lea...Fwdays

Every day, managers and team leads face numerous routine tasks: creating and updating issues in Jira, running meetings, syncing the team, handling retrospectives, and managing documentation. Most of these processes take up valuable time that could be spent on strategic leadership and team development. In this talk, I will show how AI can optimize team processes, automate routine tasks, and make workflows more efficient. You will learn how AI enhances Scrum processes and helps streamline team management. I will also share my experience in automating workflows in Jira and Slack: how to reduce manual work with simple automation rules, set up automatic notifications for blockers, generate Confluence pages, track team productivity, and extract valuable insights. What will you gain from this talk??

More Related Content

Similar to HTML5 Client-side Storage (20)

your browser, my storageFrancesco Fullone

Your browser, your storage (extended version)Francesco Fullone

Change by HTML5dynamis

The Mobile Web - HTML5 on mobile devicesWesley Hales

HTML5 & Web PlatformSwapSkills

HTML5 and Beyonddynamis

In-browser storage and meJason Casden

HTML5 Webinar - Mind Storm SoftwareRomin Irani

WP7, Droid, iPhone, Oh my!Chris Hardy

Krug Fat ClientPaul Klipp

Top 10 HTML5 Features for Oracle Cloud DevelopersBrian Huff

Keypoints html5dynamis

HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones

HTML5 and web platformdynamis

html5 an introductionvrt-medialab

Deview 2013 mobile browser internals and trends_20131022NAVER D2

Html 5 boot campLaurie Young

Local storageAdam Crabtree

Browser Horror StoriesEC-Council

サーバー?クライアントのボトルネック調査と高速化Sugawara Genki

your browser, my storageFrancesco Fullone

Your browser, your storage (extended version)Francesco Fullone

Change by HTML5dynamis

The Mobile Web - HTML5 on mobile devicesWesley Hales

HTML5 & Web PlatformSwapSkills

HTML5 and Beyonddynamis

In-browser storage and meJason Casden

HTML5 Webinar - Mind Storm SoftwareRomin Irani

WP7, Droid, iPhone, Oh my!Chris Hardy

Krug Fat ClientPaul Klipp

Top 10 HTML5 Features for Oracle Cloud DevelopersBrian Huff

Keypoints html5dynamis

HTML5 is the Future of Mobile, PhoneGap Takes You There Todaydavyjones

HTML5 and web platformdynamis

html5 an introductionvrt-medialab

Deview 2013 mobile browser internals and trends_20131022NAVER D2

Html 5 boot campLaurie Young

Local storageAdam Crabtree

Browser Horror StoriesEC-Council

サーバー?クライアントのボトルネック調査と高速化Sugawara Genki

Recently uploaded (20)

Women in Automation: Career Development & Leadership in AutomationUiPathCommunity

"AI-Driven Automation for High-Performing Teams: Optimize Routine Tasks & Lea...Fwdays

Think Like and Architect Series: Session 1 of 9 Declarative DesignWalter Spinrad

Salesforce Welly March 2025User Group MeetingAnna Loughnan Colquhoun

Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...Charles Martin

The Curie–Weiss Model is a classic from physics that is foundational to understanding the statistical mechanics approach to the theory of neural networks. And, in particular, to the theory behind weightwatcher. In this deck, I present: ? Core Mathematical Techniques: Explore the mean-field theory and the saddle-point approximation (SPA) in the large-N limit, which provide a clear derivation of the phase diagram. ? Simple Phase Behavior: See how the model predicts a phase transition—from a disordered paramagnetic state to an ordered ferromagnetic state—which parallels the behavior observed in neural network training. ? Bridging to Modern Theory: The math here is also essential for understanding the theoretical backbone behind Weightwatcher SETOL theory. Both introduce critical techniques that help explain and predict phase behavior in modern deep learning architectures. Whether you’re a physicist or an ML practitioner, these insights offer a deeper look at how classical models inform today’s neural network theory.

20250314_Kit-Works Team Study_JAVA Record.pdfWonjun Hwang

Slack Social Meetup Connect, Collaborate & Grow!.pptxSanjeetMishra29

Benefits of Using Ultrasonic Level Transmitters for Controlnikeson80

Ultrasonic Level Transmitters are a game-changer in liquid and solid level monitoring. These non-contact sensors provide high accuracy, real-time data, and reliable performance in various industries, from water management to chemical processing. With no moving parts, they require minimal maintenance, reducing downtime and operational costs. Their ability to function in harsh environments makes them ideal for remote and automated level control.

Software-Engineering-and-Best-Practices.oziasrondonc

Software engineering is more than just writing code—it’s about building scalable, maintainable, and efficient applications. This presentation explores the best practices in software engineering, including coding standards, version control, testing strategies, agile methodologies, and DevOps integration. Learn how to enhance code quality, improve team collaboration, and optimize the software development lifecycle for long-term success.

[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...Fwdays

What does it mean to be a leader, and what qualities should you develop in yourself? And how do you know if you even have these skills? This isn’t just a question—it’s the key to understanding where to start and how to move forward in unlocking your potential. Let’s break down leadership and coaching as a tool for unleashing your leadership potential. We’ll explore how coaching differs from mentoring, psychotherapy, and training—and why they’re not all the same. Special focus will be on self-coaching: learning to engage in an internal dialogue so you can keep moving forward even when external support is lacking. I’ll share a few practical life hacks and real-world examples that will help you create a plan and start taking action as soon as tomorrow.

Google News Consideration for SEO | Google Search NYCPrimary Position

WSO2Con 2025 - Architecting Cloud-Native ApplicationsWSO2

As enterprises modernise their technology stacks, designing platform-agnostic, scalable, and well-governed cloud-native architectures is essential for long-term success. This lab session will explore how to apply the platformless concept to build cloud-native applications that offer flexibility, portability, and resilience across diverse cloud environments. Through guided discussions and real-world insights, we will examine key architectural patterns, including microservices, API gateways, and Kubernetes orchestration, while addressing critical aspects such as scalability, governance, and operational efficiency. Join us to exchange ideas, refine best practices, and explore strategies for architecting cloud-native applications that are future-proof, scalable, and effectively governed.

"Surfing the IT Waves: How Not to Drown in the Information Ocean", Serhii Nem...Fwdays

In the world of IT, where technologies develop at the speed of light, it's crucial to understand not only what to learn but also when to do it. In this presentation, we will explore a practical approach to the professional development of an IT specialist and figure out how to effectively track industry innovations without compromising your main work. We will discuss what truly influences your value as a developer, when it's worth investing time in learning new technologies, and how this relates to other important skills - from English proficiency to understanding the business value of projects. The presentation will be useful for both beginners who are just entering the job market and experienced developers who strive to remain competitive.

Tesla strategy for development in modern era.pptxhibahassan160702

WSO2Con 2025 - Building AI Applications in the Enterprise (Part 1)WSO2

Building AI applications for the enterprise requires understanding key architectural patterns that enable powerful, scalable, and intelligent solutions. This session explores the core approaches to building AI-driven applications, including Generative AI, Retrieval-Augmented Generation (RAG), and AI Agents. We’ll dive into how to build and integrate AI apps, discover and connect them with enterprise tools, and manage authentication and authorization securely. Additionally, we’ll cover best practices for deploying AI-powered applications and how an AI Gateway can help monitor, secure, and optimize interactions between AI models, agents, and enterprise systems.

WSO2Con 2025 - Building Secure Customer Experience AppsWSO2

Creating exceptional customer experiences is essential in today’s digital-first world. This lab session explores building secure, personalized, and innovative customer experience apps using the WSO2 CIAM suite. We will dive into hands-on techniques for building customer experience apps using the Asgardeo SDKs, designing secure user sign-up, and login experiences using AI-driven features like Login Flow AI and Branding AI. We’ll also demonstrate how to apply MFA, passwordless, adaptive authentication, and protecting high-value APIs. This session will include a sneak peek at the WSO2 IAM roadmap and how its evolving capabilities can empower you to stay ahead in the competitive landscape.

CSUN 2025 - Interactive Charts for Everyone.pptx?ystein Moseng

WSO2Con 2025 - How an Internal Developer Platform Lets Developers Focus on CodeWSO2

Cloud-native development often involves setting up infrastructure, managing security, and integrating services—tasks that take time away from coding. An internal developer platform (IDP) streamlines these complexities, enabling developers to focus on building business logic. This lab demonstrates how an IDP supports a hybrid development approach, where developers run some components locally while consuming cloud services seamlessly. Instead of manually configuring databases, authentication, or API gateways, they leverage platform capabilities for rapid iteration. We’ll walk through a real-world scenario where a developer: Onboards quickly with an architect-defined application structure. Develops in a hybrid environment, consuming cloud APIs, databases, and AI services while iterating locally. Uses Choreo-managed authentication without dealing with OAuth2 intricacies. Discovers and reuses microservices and APIs instead of rebuilding them. Debugs efficiently without deploying all dependencies locally. Ensures security and compliance automatically, catching vulnerabilities early. By the end, you’ll see how an IDP accelerates onboarding, enhances security, and simplifies cloud-native development—so developers can focus on building great applications instead of managing infrastructure.

[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...Fwdays

What will be discussed? What distinguishes pressure from chaos in product teams? Why do these concepts often blur, and how can teams learn to navigate the fine line between them? What helps teams grow beyond their limits? Why do mature teams lose sensitivity to growth stimuli, while younger teams struggle to define their approach to growth? What breaks teams, and what strengthens them? How can managers develop a strategy for managing team pressure, and how can teams properly perceive and leverage that pressure?

AEM Branding Rollout: How to Minimize Downtime & Improve EfficiencyNikhil Gupta

? AEM Branding Rollout: Traditional vs. Modern Approach – Which One Wins? Branding rollouts in Adobe Experience Manager (AEM) can be complex, especially when multiple websites share the same codebase. Organizations often struggle with minimizing downtime, ensuring scalability, and maintaining content consistency. This case study explores two approaches to implementing branding changes in AEM: ? Traditional Approach – Requires a maintenance page, causing downtime & disruption ? Modern Approach – Uses language-level property activation for zero-downtime rollouts ? What You’ll Learn: ? How to roll out branding updates without downtime ? A side-by-side comparison of Traditional vs. Modern Approaches ? The scalability & efficiency benefits of the Modern Approach ? Lessons learned and best practices for enterprise deployments ? Thinking about implementing a similar strategy? Download the full case study here ? bit.ly/AEM-Rollout-CaseStudy ? Let’s Connect! If you’re working on digital transformation, front-end architecture, or large-scale branding rollouts, let’s exchange insights! Connect with me on LinkedIn: Nikhil Gupta (PSM-I? & Lean Six Sigma Black Belt?) ? https://www.linkedin.com/in/mrnikhilgupta/ #AEM #AdobeExperienceManager #Branding #DigitalTransformation #Scalability #ZeroDowntime #FrontEndDevelopment

Women in Automation: Career Development & Leadership in AutomationUiPathCommunity

"AI-Driven Automation for High-Performing Teams: Optimize Routine Tasks & Lea...Fwdays

Think Like and Architect Series: Session 1 of 9 Declarative DesignWalter Spinrad

Salesforce Welly March 2025User Group MeetingAnna Loughnan Colquhoun

Spin Glass Models of Neural Networks: The Curie-Weiss Model from Statistical ...Charles Martin

20250314_Kit-Works Team Study_JAVA Record.pdfWonjun Hwang

Slack Social Meetup Connect, Collaborate & Grow!.pptxSanjeetMishra29

Benefits of Using Ultrasonic Level Transmitters for Controlnikeson80

Software-Engineering-and-Best-Practices.oziasrondonc

[QUICK TALK] "Coaching 101: How to Identify and Develop Your Leadership Quali...Fwdays

Google News Consideration for SEO | Google Search NYCPrimary Position

WSO2Con 2025 - Architecting Cloud-Native ApplicationsWSO2

"Surfing the IT Waves: How Not to Drown in the Information Ocean", Serhii Nem...Fwdays

Tesla strategy for development in modern era.pptxhibahassan160702

WSO2Con 2025 - Building AI Applications in the Enterprise (Part 1)WSO2

WSO2Con 2025 - Building Secure Customer Experience AppsWSO2

CSUN 2025 - Interactive Charts for Everyone.pptx?ystein Moseng

WSO2Con 2025 - How an Internal Developer Platform Lets Developers Focus on CodeWSO2

[QUICK TALK] "Why Some Teams Grow Better Under Pressure", Oleksandr Marchenko...Fwdays

AEM Branding Rollout: How to Minimize Downtime & Improve EfficiencyNikhil Gupta

HTML5 Client-side Storage

1. HTML5 Client-side Storage That’s hot. Andrew Hedges a@tapulous.com @segdeha

2. The web is stateless. http://reinep.?les.wordpress.com/2011/02/julian-assange-wikileaks.jpg

3. http://www.toothpastefordinner.com/060606/whats-better-than-a-cookie.gif

4. If only we could store stuff on the client-side.

5. http://farm6.static.?ickr.com/5050/5369917493_111ef869bd.jpg

6. Web SQL http://yourdumpsterrentals.com/images/Dump-Truck.jpg

7. localStorage http://c1.gas2.org/?les/2008/04/hondacivicgx.jpg

8. sessionStorage http://dvice.com/pics/smart-car.jpg

9. Web SQL localStorage sessionStorage Safari 3.2 Safari 4 Chrome 4 Chrome 4 Opera 11 Opera 11 iOS 3.2 iOS 3.2 Android 2.1 Android 2.1 Opera Mini 5 IE 8 Firefox 3.5 IndexDB Firefox 4 Sources: http://www.html5rocks.com/features/storage & http://caniuse.com/

10. Web SQL localStorage sessionStorage Persistent Persistent Session-based Asynchronous Synchronous Synchronous Typed data String data String data strings key/value pairs key/value pairs numbers Want to access Want to keep dates data across data separate Large amounts of windows across windows structured data Source: http://caniuse.com

12. Obligatory “we’re hiring” slide. tapulous.com /jobs

狠狠撸

HTML5 Client-side Storage

Recommended

More Related Content

Similar to HTML5 Client-side Storage (20)

Recently uploaded (20)

HTML5 Client-side Storage