Skip to main content

Browser Window Properties

Table of Contents​

  1. iframe
  2. localStorage

iframe​

The iframe element allows you to embed another HTML page within the current page. It is commonly used for embedding videos, maps, and other web content.

Usage​

<iframe src="https://example.com" width="600" height="400" frameborder="0" allowfullscreen</iframe>

Angular​

@Component({
    selector: 'app-iframe',
    template: `<iframe [src]="iframeSrc" width="600" height="400" frameborder="0" allowfullscreen></iframe>`
})
export class IframeComponent {
    iframeSrc = 'https://example.com';
}

React​

const IframeComponent = () => (
    <iframe src="https://example.com" width="600" height="400" frameborder="0" allowFullScreen</iframe>
);

export default IframeComponent;

React Native​

React Native does not support iframe directly. Use a WebView instead.

import { WebView } from 'react-native-webview';

const IframeComponent = () => (
    <WebView source={{ uri: 'https://example.com' }} style={{ width: 600, height: 400 }} />
);


export default IframeComponent;

Vue​

<template>
    <iframe :src="iframeSrc" width="600" height="400" frameborder="0" allowfullscreen></iframe>
</template>

<script>
export default {
    data() {
        return {
            iframeSrc: 'https://example.com'
        };
    }
};
</script>

localStorage​

The localStorage object allows you to store key-value pairs in a web browser with no expiration date.

Usage​

// Set item
localStorage.setItem('key', 'value');

// Get item
const value = localStorage.getItem('key');

// Remove item
localStorage.removeItem('key');

// Clear all items
localStorage.clear();

Angular​

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

React​

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

React Native​

React Native does not support localStorage directly. Use AsyncStorage instead.

import AsyncStorage from '@react-native-async-storage/async-storage';

const storeData = async (key, value) => {
    try {
        await AsyncStorage.setItem(key, value);
    } catch (e) {
        // saving error
    }
};

const getData = async (key) => {
    try {
        const value = await AsyncStorage.getItem(key);
        return value;
    } catch (e) {
        // reading error
    }
};

const removeData = async (key) => {
    try {
        await AsyncStorage.removeItem(key);
    } catch (e) {
        // remove error
    }
};

const clearAll = async () => {
    try {
        await AsyncStorage.clear();
    } catch (e) {
        // clear error
    }
};

Vue​

localStorage.setItem('key', 'value');
const value = localStorage.getItem('key');
localStorage.removeItem('key');
localStorage.clear();

Conclusion​

This documentation provides a framework-agnostic approach to using advanced browser window properties such as iframe and localStorage in Angular, React, React Native, and Vue applications.