mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

docs: Improve the docs on sharing data

Browse source
This commit is contained in:
Cheng Zhao 2016-02-16 11:52:47 +08:00
parent b8e8e4c930
commit f58bab70c5
2 changed files with 28 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
docs/faq/electron-faq.md
View file

@ -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 using the V8 shipped by Chrome browser, the shiny new JavaScript feature of a
new Node.js version is usually already in Electron. 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 To share data between web pages (the renderer processes) the simplest way is to
and more natural technique is to use a web standard API already available in all use HTML5 APIs which are already available in browsers. Good candidates are
browsers. A good candidate is the [Storage API][storage], [`localStorage`][local-storage],
[Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage), [`sessionStorage`][session-storage], and [IndexedDB][indexed-db].
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).
Another technique, but this time specific to Electron, is to store objects in Or you can use the IPC system, which are specific to Electron, to store objects
the main process as a global variable and then to access them from the renderers in the main process as a global variable, and then to access them from the
through the `remote` module: renderers through the `remote` module:
```javascript ```javascript
// In main.js of browser process // In the main process.
global.sharedObject = {}; global.sharedObject = {
someProperty: 'default value'
};
``` ```
```javascript ```javascript
// js in page-1.html // In page 1.
require('remote').getGlobal('sharedObject').someProperty = 'some value'; require('remote').getGlobal('sharedObject').someProperty = 'new value';
``` ```
```javascript ```javascript
// js in page-2.html // In page 2.
console.log(require('remote').getGlobal('sharedObject').someProperty); console.log(require('remote').getGlobal('sharedObject').someProperty);
``` ```
## My app's window/tray disappeared after a few minutes. ## My app's window/tray disappeared after a few minutes.
This happens when the variable which is used to store the window/tray gets 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 [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 [variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx
[electron-module]: https://www.npmjs.com/package/electron [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

18
docs/tutorial/quick-start.md
View file

@ -34,8 +34,8 @@ The main process creates web pages by creating `BrowserWindow` instances. Each
is also terminated. is also terminated.
The main process manages all web pages and their corresponding renderer The main process manages all web pages and their corresponding renderer
processes. Each renderer process is isolated and only cares processes. Each renderer process is isolated and only cares about the web page
about the web page running in it. running in it.
In web pages, calling native GUI related APIs is not allowed because managing 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 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 process of the web page must communicate with the main process to request that
the main process perform those operations. the main process perform those operations.
In Electron, we have provided the [ipc](../api/ipc-renderer.md) module for In Electron, we have several ways to communicate between the main process and
communication between the main process and renderer process. There is also a renderer processes. Like [`ipcRenderer`](../api/ipc-renderer.md) and
[remote](../api/remote.md) module for RPC style communication. [`ipcMain`](../api/ipc-main.md) modules for sending messages, and the
[remote](../api/remote.md) module for RPC style communication. There is also
And finally there are different techniques [to share objects between web an FAQ entry on [how to share data between web pages][share-data].
pages](../faq/electron-faq.md#what-are-the-different-techniques-to-share-objects-between-web-pages)
of the same window or of different windows.
## Write your First Electron App ## Write your First Electron App
@ -209,3 +207,5 @@ $ cd electron-quick-start
# Install dependencies and run the app # Install dependencies and run the app
$ npm install && npm start $ npm install && npm start
``` ```
[share-data]: ../faq/electron-faq.md#how-to-share-data-between-web-pages