From f58bab70c5146d63583af9179941d87fe11d7e60 Mon Sep 17 00:00:00 2001 From: Cheng Zhao Date: Tue, 16 Feb 2016 11:52:47 +0800 Subject: [PATCH] docs: Improve the docs on sharing data --- docs/faq/electron-faq.md | 40 +++++++++++++++++------------------- docs/tutorial/quick-start.md | 18 ++++++++-------- 2 files changed, 28 insertions(+), 30 deletions(-) diff --git a/docs/faq/electron-faq.md b/docs/faq/electron-faq.md index d5470f701734..a58d31107b6d 100644 --- a/docs/faq/electron-faq.md +++ b/docs/faq/electron-faq.md @@ -18,40 +18,34 @@ New features of Node.js are usually brought by V8 upgrades, since Electron is using the V8 shipped by Chrome browser, the shiny new JavaScript feature of a new Node.js version is usually already in Electron. -## What are the different techniques to share objects between web pages? +## How to share data between web pages? -To share objects between web pages (that is on the renderer side) the simplest -and more natural technique is to use a web standard API already available in all -browsers. A good candidate is the -[Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage), -through either the -[`window.localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) property or the -[`window.sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) property. -Note that the Storage API allows only to store strings, so objects must be -serialized as JSON. -Another candidate is -[IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API). +To share data between web pages (the renderer processes) the simplest way is to +use HTML5 APIs which are already available in browsers. Good candidates are +[Storage API][storage], [`localStorage`][local-storage], +[`sessionStorage`][session-storage], and [IndexedDB][indexed-db]. -Another technique, but this time specific to Electron, is to store objects in -the main process as a global variable and then to access them from the renderers -through the `remote` module: +Or you can use the IPC system, which are specific to Electron, to store objects +in the main process as a global variable, and then to access them from the +renderers through the `remote` module: ```javascript -// In main.js of browser process -global.sharedObject = {}; +// In the main process. +global.sharedObject = { + someProperty: 'default value' +}; ``` ```javascript -// js in page-1.html -require('remote').getGlobal('sharedObject').someProperty = 'some value'; +// In page 1. +require('remote').getGlobal('sharedObject').someProperty = 'new value'; ``` ```javascript -// js in page-2.html +// In page 2. console.log(require('remote').getGlobal('sharedObject').someProperty); ``` - ## My app's window/tray disappeared after a few minutes. This happens when the variable which is used to store the window/tray gets @@ -154,3 +148,7 @@ is only available in renderer processes. [memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management [variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx [electron-module]: https://www.npmjs.com/package/electron +[storage]: https://developer.mozilla.org/en-US/docs/Web/API/Storage +[local-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage +[session-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage +[indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API diff --git a/docs/tutorial/quick-start.md b/docs/tutorial/quick-start.md index 67fe5d608a13..684c72c6669e 100644 --- a/docs/tutorial/quick-start.md +++ b/docs/tutorial/quick-start.md @@ -34,8 +34,8 @@ The main process creates web pages by creating `BrowserWindow` instances. Each is also terminated. The main process manages all web pages and their corresponding renderer -processes. Each renderer process is isolated and only cares -about the web page running in it. +processes. Each renderer process is isolated and only cares about the web page +running in it. In web pages, calling native GUI related APIs is not allowed because managing native GUI resources in web pages is very dangerous and it is easy to leak @@ -43,13 +43,11 @@ resources. If you want to perform GUI operations in a web page, the renderer process of the web page must communicate with the main process to request that the main process perform those operations. -In Electron, we have provided the [ipc](../api/ipc-renderer.md) module for -communication between the main process and renderer process. There is also a -[remote](../api/remote.md) module for RPC style communication. - -And finally there are different techniques [to share objects between web -pages](../faq/electron-faq.md#what-are-the-different-techniques-to-share-objects-between-web-pages) -of the same window or of different windows. +In Electron, we have several ways to communicate between the main process and +renderer processes. Like [`ipcRenderer`](../api/ipc-renderer.md) and +[`ipcMain`](../api/ipc-main.md) modules for sending messages, and the +[remote](../api/remote.md) module for RPC style communication. There is also +an FAQ entry on [how to share data between web pages][share-data]. ## Write your First Electron App @@ -209,3 +207,5 @@ $ cd electron-quick-start # Install dependencies and run the app $ npm install && npm start ``` + +[share-data]: ../faq/electron-faq.md#how-to-share-data-between-web-pages