Maison > Article > interface Web > Explication détaillée du stockage HTML5
Explication détaillée du stockage HTML5
- 墨辰丷original
- 2018-05-16 11:21:011496parcourir
Cet article présente principalement l'explication détaillée du stockage HTML5. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde. Le
HTML5storage permet aux sites Web de stocker des informations localement sur votre ordinateur et de les récupérer en cas de besoin ultérieur. Ce concept est similaire au cookie, mais la différence est qu'il est conçu pour une plus grande capacité de stockage. La taille du Cookie est limitée, et le cookie sera envoyé à chaque fois que vous demanderez une nouvelle page. Le stockage de HTML5 est stocké sur votre ordinateur Une fois la page chargée, le site Web peut utiliser . Javascript pour obtenir ces données.
1, sessionStorage
Détection
!!window.sessionStorage;
Méthodes courantes
.key = valeur
.setItem(clé,valeur)
.getItem(clé)
.removeItem(clé)
.clear()
window.sessionStorage.name = 'rainman'; // 赋值 window.sessionStorage.setItem('name','cnblogs'); // 赋值 window.sessionStorage.getItem('name'); // 取值 window.sessionStorage.removeItem('name'); // 移除值 window.sessionStorage.clear(); // 删除所有sessionStorage
Événement :
window.onstorage
Détecter les changements de valeur, la prise en charge du navigateur n'est pas bonne.
Instructions :
Le stockage des cookies est limité à 4 Ko. En comparaison, le stockage de session a un espace de stockage plus grand, mais en ce qui concerne la taille spécifique, cela dépend du fabricant du navigateur.
Cookie a un mécanisme qui consiste à envoyer le cookie au serveur à chaque fois que le client demande au serveur. Cela fera sans aucun doute beaucoup d'opérations inutiles, car toutes les demandes du serveur ne sont pas effectuées. a besoin de toutes les informations du cookie et le stockage de session résout très bien ce problème. Il ne les envoie pas automatiquement, ce qui réduit le travail inutile.
Le cycle de vie des données stockées via sessionStorage est similaire à Session. Les données n'existeront plus après la fermeture du navigateur (ou de l'onglet). Mais sessionStorage existe toujours après avoir actualisé la page ou utilisé le bouton "suivant" ou "retour".
La valeur du stockage de session pour chaque fenêtre est indépendante (chaque fenêtre a ses propres données). Ses données disparaîtront à la fermeture de la fenêtre. Le stockage de session entre fenêtres ne peut pas non plus être partagé. .
La clé et la valeur dans setItem sont stockées sous forme de chaînes. C'est-à-dire que s'il y a le code suivant : setItem('count', 1); ce que vous obtiendrez via getItem('count') + 5 ne sera pas le 6 (entier) attendu, mais '16' (string) .
Lorsque vous utilisez à nouveau setItem pour définir la valeur d'une clé existante, la nouvelle valeur remplacera l'ancienne valeur.
Lorsque les données stockées changent, l'événement correspondant (window.onstorage) sera déclenché. Cependant, la prise en charge actuelle de cet événement dans divers navigateurs n'est pas parfaite et peut être ignorée. le moment étant.
2, stockage local
Détecter
!!window.localStorage;
方法和sessionStorage相同
说明：
local storage把只把数据存储在了客户端使用，不会发送的服务器上（除非你故意这样做）。
而且对于某一个域下来说，local storage是共享的（多个窗口共享一个“数据库”）。
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
举例
//结合JSON.stringify使用更强大
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person));
JSON.parse(localStorage.getItem('me')).name; // 'rainman'
/**
* JSON.stringify，将JSON数据转化为字符串
* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}'
* JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'
* JSON.parse，反解JSON.stringify
* JSON.parse('["a","b","c"]') // ["a","b","c"]
*/3、Database Storage
对简单的数据存储，使用sessionStorage和localStorage能够很好地完成，但是在对琐碎的关系数据进行处理之外，它就力所不及了。而这正是 HTML 5 的“Web SQL Database”API 接口的应用所在。
A、打开链接
var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000); // 打开链接
if(!db) { alert("Failed to connect to database."); } // 检测连接是否创建成功以上代码创建了一个数据库对象 db，名称是 Todo，版本编号为0.1。db 还带有描述信息和大概的大小值。如果需要，这个大小是可以改变的，所以没有必要预先假设允许用户使用多少空间。
绝不可以假设该连接已经成功建立，即使过去对于某个用户它是成功的。为什么一个连接会失败，存在多个原因。也许用户代理出于安全原因拒绝你的访问，也许设备存储有限。面对活跃而快速进化的潜在用户代理，对用户的机器、软件及其能力作出假设是非常不明智的行为。比如，当用户使用手持设备时，他们可自由处置的数据可能只有几兆字节。
B、执行查询
db.transaction( function(tx) {
tx.executeSql(
"INSERT INTO ToDo (label, timestamp) values(?, ?)",
['lebel', new Date().getTime()],
function(tx2, result){ alert('成功'); },
function(tx2, error){ alert('失败:' + error.message); }
);
});执行SQL语句使用database.transaction()函数，该函数只有一个参数，负责执行查询的函数。
该函数具有一个类型事务的参数（tx）。
该事务参数（tx）具有一个函数：executeSql()。这个函数使用四个参数：
表示查询的SQL字符串；插入到查询中问号所在处的字符串数据；一个成功时执行的函数；一个失败时执行的函数。执行成功的函数有两个参数：tx2，事务性参数；result，执行的返回结果，结构如图
执行成功的函数也有两个参数：tx2，事务性参数；error，错误对象，结构如图
C、其它
Chrome支持； firefox（测试时版本4.01）不支持；IE8不支持。
D、示例
//创建数据库
var db = openDatabase("users", "1.0", "用户表", 1024 * 1024);
if(!db){
alert("Failed to connect to database.");
} else {
alert("connect to database 'K'.");
}
// 创建表
db.transaction( function(tx) {
tx.executeSql(
"CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)",
[],
function(){ alert('创建users表成功'); },
function(tx, error){ alert('创建users表失败:' + error.message); }
);
});
// 插入数据
db.transaction(function(tx) {
tx.executeSql(
"INSERT INTO users (id, name) values(?, ?)",
[Math.random(), 'space'],
function(){ alert('插入数据成功'); },
function(tx, error){ alert('插入数据失败: ' + error.message);}
);
});
// 查询
db.transaction( function(tx) { tx.executeSql(
"SELECT * FROM users", [],
function(tx, result) {
var rows = result.rows, length = rows.length, i=0;
for(i; i < length; i++) {
alert(
'id=' + rows.item(i)['id'] +
'name='+ rows.item(i)['name']
);
}
},
function(tx, error){
alert('Select Failed: ' + error.message);
}
);
});
// 删除表
db.transaction(function (tx) {
tx.executeSql('DROP TABLE users');
});4、globalStorage
Ceci est également proposé dans html5 Après la fermeture du navigateur, les informations stockées à l'aide de globalStorage peuvent toujours. être stocké Conservez-le, comme localStorage, les informations stockées dans n'importe quelle page du domaine peuvent être partagées par toutes les pages
Syntaxe de base
globalStorage['developer.mozilla.org'] - Tous les sous-domaines sous Developer.mozilla.org peuvent stocker des objets via cet espace de noms en lecture et en écriture.
globalStorage['mozilla.org'] - Toutes les pages Web sous le nom de domaine mozilla.org peuvent être lues et écrites via cet objet de stockage d'espace de noms.
globalStorage['org'] - Toutes les pages Web sous le nom de domaine .org peuvent être lues et écrites via cet objet de stockage d'espace de noms.
globalStorage[''] - Toute page Web sous n'importe quel nom de domaine peut être lue et écrite via cet objet de stockage d'espace de noms
Attributs de la méthode
setItem(key, value) - Définit ou réinitialise la valeur de la clé.
getItem(key) —— Obtenez la valeur clé.
removeItem(key) - Supprime la valeur de la clé.
Définir la valeur de la clé : window.globalStorage["planabc.net"].key = value;
Obtenir la valeur de la clé : value = window .globalStorage["planabc.net"].key;
Autre
Expiré L'heure est la même que celle de localStorage et certaines autres fonctionnalités sont également similaires à celles de localStorage.
Firefox ne prend désormais en charge que le stockage globalStorage dans le domaine actuel. Si vous utilisez le domaine public, cela provoquera une erreur similaire au code « Erreur de sécurité » : « 1000 ».
5, Compatibilité
|
Firefox (Gecko) | Opéra | ||||||||||||||||||||||||||
| 4 | 2 | 8 | 10h50 | 4 | ||||||||||||||||||||||||
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 | |||||||||||||||||||||||
| globalStorage | -- | 2 | -- | -- | -- |
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!