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.