HTML5storage는 웹사이트가 정보를 컴퓨터에 로컬로 저장하고 나중에 필요할 때 검색할 수 있는 방법을 제공합니다. 이 개념은 cookie와 유사하지만 차이점은 더 큰 용량의 저장을 위해 설계되었다는 것입니다. 쿠키는 크기가 제한되어 있으며 새 페이지를 요청할 때마다 쿠키가 전송됩니다. HTML5의 storage는 컴퓨터에 저장되며 웹사이트는 페이지가 로드된 후 Javascript를 통해 이 데이터를 얻을 수 있습니다.
1, sessionStorage
Detection
!!window.sessionStorage;
일반적인 방법
.key = value .setItem(key,value) .getItem(key) .removeItem(key) .clear()
window.sessionStorage.name = 'rainman'; // 赋值 window.sessionStorage.setItem('name','cnblogs'); // 赋值 window.sessionStorage.getItem('name'); // 取值 window.sessionStorage.removeItem('name'); // 移除值 window.sessionStorage.clear(); // 删除所有sessionStorage
이벤트:
window.onstorage
가치 있는 변경 사항 감지, 브라우저 지원이 좋지 않습니다.
참고:
이에 비해 세션 저장소는 더 큰 저장 공간을 갖지만 구체적인 크기는 브라우저 제조업체에 따라 다릅니다.
쿠키에는 클라이언트가 서버에 요청할 때마다 쿠키를 서버에 보내는 메커니즘이 있습니다. 서버가 매번 쿠키의 모든 정보를 요구하는 것은 아니기 때문에 이는 의심할 여지 없이 불필요한 작업을 많이 수행하게 됩니다. 세션 저장소는 이 문제를 매우 잘 해결하므로 데이터를 자동으로 전송하지 않으므로 불필요한 작업이 줄어듭니다.
sessionStorage를 통해 저장된 데이터의 수명주기는 세션과 유사하며 브라우저(또는 탭)를 닫으면 데이터가 더 이상 존재하지 않습니다. 그러나 페이지를 새로 고치거나 "앞으로" 또는 "뒤로 버튼"을 사용한 후에도 sessionStorage는 여전히 존재합니다.
세션 저장의 각 창 값은 독립적입니다(각 창에는 자체 데이터가 있음). 해당 데이터는 창을 닫으면 사라지며 창 간 세션 저장은 공유할 수 없습니다.
setItem의 키와 값은 문자열 형태로 저장됩니다. 즉, 다음 코드가 있는 경우: setItem('count', 1); getItem('count') + 5를 통해 얻는 것은 예상되는 6(정수)이 아니라 '16'(문자열)입니다. .
setItem을 다시 사용하여 기존 키 값을 설정하면 새 값이 이전 값을 대체합니다.
스토리지의 데이터가 변경되면 해당 이벤트(window.onstorage)가 발생하지만 현재 다양한 브라우저에서 이 이벤트에 대한 지원이 완벽하지 않아 당분간 무시할 수 있습니다.
2, localStorage
Detection
!!window.localStorage 방법은 동일합니다.
sessionStorage
참고:로컬 저장소는 클라이언트가 사용하는 서버의 데이터만 저장하며 전송되지 않습니다(의도적으로 수행하지 않는 한).
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
这个也是html5中提出来，在浏览器关闭以后，使用globalStorage存储的信息仍能够保留下来，localStorage一样，域中任何一个页面存储的信息都能被所有的页面共享
基本语法
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。
globalStorage['mozilla.org'] - mozilla.org 도메인 이름 아래의 모든 웹페이지는 이 네임스페이스 저장소 개체를 통해 읽고 쓸 수 있습니다.
globalStorage['org'] - .org 도메인 이름 아래의 모든 웹 페이지는 이 네임스페이스 저장소 개체를 통해 읽고 쓸 수 있습니다.
globalStorage[''] - 이 네임스페이스 저장소 개체
Method attribute
setItem(key, value) —— Set을 통해 모든 도메인 이름 아래의 모든 웹 페이지를 읽고 쓸 수 있습니다. 또는 키 값을 재설정하세요.
getItem(key) - 키 값을 가져옵니다.
removeItem(key) - 키 값을 삭제합니다.
키 값 설정: window.globalStorage["planabc.net"].key = value;
키 값 가져오기: value = window.globalStorage["planabc.net"].key;
Others
만료 시간은 localStorage와 동일하며, 그 외 일부 기능도 localStorage와 유사합니다.
이제 Firefox는 현재 도메인의 globalStorage 저장소만 지원합니다. 공개 도메인을 사용하면 "보안 오류" 코드: "1000"과 유사한 오류가 발생합니다.
5, 호환성
|
|
🎜Chrome🎜🎜 |
🎜Firefox( Gecko)🎜🎜 |
🎜Internet Explorer🎜🎜 |
🎜 Opera🎜🎜 |
🎜Safari(WebKit)🎜🎜 |
||||||||||||||||||||||||
| 🎜localStorage🎜 td > | 🎜4🎜 | 🎜2🎜 | 🎜8🎜 | 🎜10.50🎜 | 🎜4🎜 | ||||||||||||||||||||||||
| 🎜sessionStorage🎜 | 🎜5🎜 | 🎜2🎜 | 🎜8🎜 | 🎜10.50🎜🎜4🎜 | |||||||||||||||||||||||||
| 🎜globalStorage🎜 | 🎜--🎜 | 🎜 2🎜 | 🎜--🎜 | 🎜--🎜 | 🎜-- 🎜 |
위 내용은 html5 로컬 스토리지 스토리지 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
