Structured Higher Education Thesis

PRESIDENCY UNIVERSITY

FRONTEND FULLSTACK DEVELOPMENT

• 20211CSD0105
• 20211CSD0043
• 20211CSD0066
• 20211CSD0067
• 20211CSD0068
• 20211CSD0121

Dish =Front End

Ingredients:

• HTML
• CSS
• Java Script

01

WEB STORAGE

Web storage refers to client-side storage mechanisms that allow web apps to store data in the browser. This includes technologies like session storage, local storage, cookies, and IndexedDB.

02

DESCRIPTION:

• Web Storage is also known as DOM(Document Object Model)Storage.
• It is a simple client side database that allows the users to persist data in the form of Key value pairs.
• It has a fairly simple API retrive data into the local storage.It can store upto 10MB per domain.Unlike cookies,data stored are not included with every HTTP request.
• IE7 and older versions does not support web storage,all the other browsers like chrome,opera,firefox,safari and IE8+ support Webstorage

03

Algorithmic Approach

• With webstorage data can be stored locally within the users web browsers.

• Web stoarge is more secure and large amount of data can be stored,without affecting web performance.

• Unlike Cookies,the storage limit is far larger,and information is never transferred to server.

Types of Web Storage:

1. Session Storage

• Session Storage allows data to be stored in the browser that will be cleared when the page session ends.
• The data stored in Session Storage persists only for the duration of the browser tab or window. When the tab or window is closed, the session storage is cleared.

Some key aspects of Session Storage:

• The data is stored only for a session, meaning a browser tab.
• The data is cleared when the browser tab is closed.
• The data is isolated per origin (domain + port).
• The storage limit is larger than cookies, around 5MB.
• The data can only be accessed from the same source.

2. Local Storage:

• Local storage is a web storage API that allows JavaScript sites and apps to store key/value data in the browser with no expiration date. The data persists even when the browser is closed and reopened.
• Local storage helps store data that needs to be accessed frequently without making network requests. Unlike session storage, local storage data has no time limit. It is deleted only when explicitly told to use JavaScript, or when cleared by the browser settings.

Some common use cases for local storage include:

• Caching authentication tokens for your app's API
• Storing user preferences or settings for your app
• Saving form data so users don't lose their input if they accidentally close the tab
• Keeping track of cached data or images to improve performance

Security:

• Only store non-sensitive data : Web storage is not a secure place to store sensitive user information like passwords or financial data.
• Use HTTPS : Web storage should only be used over HTTPS connections to prevent man-in-the-middle attacks. Data stored over HTTP is visible to the network.
• Implement access controls : Use user authentication and authorization to control access to stored data. Apps should verify user identity before allowing access to stored data.
• Encrypt sensitive values : For any sensitive data that must be stored, encryption should be used to protect the data.

Browser Support:

• Session Storage and Local Storage have broad support in all primary desktop and mobile browsers, including Chrome, Firefox, Safari, Edge, and Opera.
• Cookies have near-universal support across major browsers.
• IndexedDB has good support across most modern browsers but lacks support in older browsers like IE10 and below.

To handle limited browser support, polyfills and fallbacks can be implemented:

• LocalForage provides an IndexedDB polyfill that falls back to WebSQL and LocalStorage.

• A common fallback for SessionStorage is storing data in memory on the client side.

• Cookies can be a fallback for LocalStorage when browser support is limited.

What are Web Storage’s Built-In Interfaces?

• The web storage built-in interfaces are the recommended tools for reading and manipulating a browser’s sessionStorage and localStorage objects.
• The six (6) built-in interfaces are:
• setItem()
• key()
• getItem()
• length
• removeItem()
• clear()

Conclusions

• Emerging storage technologies like 3D XPoint, DNA storage, and quantum computing may shape the future of data storage broadly. However, web storage will remain essential for browser-based apps. Improved APIs like Cache Storage complement existing options. Web storage will evolve to meet the changing needs of web applications.

• When using web storage, it's essential to be mindful of browser support, security implications, and storage limits. Usage will likely grow as web apps become more complex and rely on client-side storage.