DOM存储——客户端存储
概述
Dom存储(Storage)API 是通过 sessionStorage 对象和 localStorage 对象来实现的。通过这些对象，WEB应用程序能够把信息存储到客户端，并再以后需要的时候进行获取。
其中：
- sessionStorage 会话存储，其中的数据在页面会话结束时会被自动清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
- localStorage 本地存储，其中的数据没有过期时间，在页面会话结束时不会被自动清除。
DOM存储与cookie的相同点：
- 本地存储和cookie一样提供了把数据保存到本地的能力，页面刷新或者关掉浏览器后，数据依然存在。
- 本地存储cookie一样只能存字符串数据。
DOM存储与cookie的不同点：
- 存储容量大。虽然不同浏览器的标准可能不一样，主流的一般都在5~10M，远超cookie的4k。
- 数据不会自动发送到服务器，与cookie相比，节省带宽，加快响应速度
代码示例
浏览器支持检查
通过以下代码可以事先检测浏览器是否支持本API。
if(window.Storage) {
//支持此API
} else {
//不支持此API
}存储数据
使用本地DOM存储
var loSt = window.localStorage;
loSt['username'] = 'hudao';
loSt.setItem('jobName', 'wrting');
console.log(loSt.length); //2
console.log(loSt.username + ' job is ' + loSt.jobName); //hudao job is wrting
loSt['jobName'] = 'singer';
console.log(loSt.username + ' job is ' +loSt.jobName); //hudao job is singer
delete loSt['jobName'];使用会话DOM存储
sessionStorage.setItem('company', 'Hudao');上面代码表示访问当前域名的会话DOM存储对象，并使用setItem()访问往里面添加一个数据条目。
//获得填充公司名称的文本输入框
var company = document.getElementByid('company');
//检测是否存在company键值
if(sessionStorage.getItem('company')) {
//将文本框中的值设置成sessionStorage中的company键值
company.value = sessionStorage.getItem('company'); }
//添加监听文本输入框的change事件
company.addEventListener("change", function(){
//将文本框的值保存到sessionStorage中的company键值
sessionStorage.setItem("company", company.value);
});捕捉存储异常
不同的浏览器，分配给本地存储的空间是不一样的,该存储的空间是整个子域共享的。
如果当本地存储满了，再进行写数据，将会触发error，因此有时需要捕捉调用setItem()时的错误。
try{
localStorage.setItem('name', 'hudao');
}catch(e){
console.log('It's cant't write!');
}清空存储
调用clear()方法将会清空整个域的数据，包括和当前页面共享一个存储空间的其他页面。
localStorage.clear();
sessionStorage.clear();本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-02-13，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。