이 글은 주로 HTML5 저장공간에 대한 자세한 설명을 소개합니다. 관심있는 친구들이 참고하시면 좋을 것 같습니다.
HTML5storage는 웹사이트가 정보를 컴퓨터에 로컬로 저장하고 나중에 필요할 때 검색할 수 있는 방법을 제공합니다. 이 개념은 cookie와 유사하지만 차이점은 더 큰 용량의 저장을 위해 설계되었다는 것입니다. 쿠키는 크기가 제한되어 있으며 새 페이지를 요청할 때마다 쿠키가 전송됩니다. HTML5의 storage는 컴퓨터에 저장되며 웹사이트는 페이지가 로드된 후 Javascript를 통해 이 데이터를 얻을 수 있습니다.
1, sessionStorage
Detection
!!window.sessionStorage;
일반적인 방법
.key = 값
.setItem(키,값)
.getItem(키)
.removeItem(키)
)
window.sessionStorage.name = 'rainman'; // 赋值
window.sessionStorage.setItem('name','cnblogs'); // 赋值
window.sessionStorage.getItem('name'); // 取值
window.sessionStorage.removeItem('name'); // 移除值
window.sessionStorage.clear(); // 删除所有sessionStorage
로그인 후 복사
이벤트:
window.onstorage
가치 있는 변화 감지, 브라우저 지원이 좋지 않습니다.
설명:
쿠키 저장 공간은 4k로 제한되어 있지만, 자세한 내용은 크기에 따라 다릅니다. 브라우저 제조업체의 특정 구현.
쿠키에는 클라이언트가 서버에 요청할 때마다 쿠키를 서버에 보내는 메커니즘이 있습니다. 서버가 매번 쿠키의 모든 정보를 요구하는 것은 아니기 때문에 이는 의심할 여지 없이 불필요한 작업을 많이 수행하게 됩니다. 세션 저장소는 이 문제를 매우 잘 해결하므로 데이터를 자동으로 전송하지 않으므로 불필요한 작업이 줄어듭니다.
sessionStorage를 통해 저장된 데이터의 수명주기는 세션과 유사하며 브라우저(또는 탭)를 닫으면 데이터가 더 이상 존재하지 않습니다. 그러나 페이지를 새로 고치거나 "앞으로" 또는 "뒤로 버튼"을 사용한 후에도 sessionStorage는 여전히 존재합니다.
세션 저장의 각 창 값은 독립적입니다(각 창에는 자체 데이터가 있음). 해당 데이터는 창을 닫으면 사라지며 창 간 세션 저장은 공유할 수 없습니다.
setItem의 키와 값은 문자열 형태로 저장됩니다. 즉, 다음 코드가 있는 경우: setItem('count', 1); getItem('count') + 5를 통해 얻는 것은 예상되는 6(정수)이 아니라 '16'(문자열)입니다. .
setItem을 다시 사용하여 기존 키 값을 설정하면 새 값이 이전 값을 대체합니다.
스토리지의 데이터가 변경되면 해당 이벤트(window.onstorage)가 발생하지만 현재 다양한 브라우저에서 이 이벤트에 대한 지원이 완벽하지 않아 당분간 무시할 수 있습니다.
2, localStorage
Detection
!!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、其它
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'] - 모든 하위 도메인은 이 네임스페이스 읽기 및 쓰기를 통해 개체를 저장할 수 있습니다.
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(게코) |
Internet Explorer | Opera
|
Safari(WebKit) |
localStorage |
4 |
2 | 8
|
10.50 |
4 |
sessionStorage |
5 |
2 |
8 |
10.50 |
4 |
globalStorage |
-- |
2 |
--
|
-- |
--
|
관련 권장사항:
vuex+localstorage 동적 모니터링 저장 단계 자세한 설명
HTM l5의 저장 방법에 대한 자세한 설명 sessionStorage 및 localStorage
vuex는 로컬 저장소를 결합하여 저장소 변경 사항을 동적으로 모니터링합니다
위 내용은 HTML5 저장소 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
