HTML5本地存储(localStorage和sessionStorage)

什么是本地存储?
它就是一种让网页可以把键值对存储在用户浏览器客户端的方法。像Cookie一样,这些数据不会因为你打开新网站,刷新页面,乃至关闭你的浏览器而消失

本地存储与Cookie的不同

  1. 更大的存储容量(cookie大小限制在4k左右,localStorage大小限制在5M左右)
  2. 节省带宽(cookie每次随HTTP事务一起发送,浪费带宽,localStorage不会随着HTTP传输)

localStorage与sessionStorage的不同

  1. session即会话的意思,在这里的session是指用户浏览某个网站时,从进入网站到关闭网站这个时间段,session对象的有效期就只有这么长,当用户关闭网站,sessionStorage就清空
  2. 将数据保存在客户端硬件设备上,意思就是下次打开计算机时数据还会在

localStorage常用接口

  • localStorage.getItem(key):获取指定key本地存储的值
  • localStorage.setItem(key,value):将value存储到key字段
  • localStorage.removeItem(key):删除指定key本地存储的值

注意:localStorage存储的值都是字符串类型,在使用数据之前要做相应的转换

如何使用(localStorage)

1.检查浏览器是否支持本地存储

if (window.localStorage && window.localStorage.getItem) {
    alert("浏览支持localStorage")
} else {
    alert("浏览暂不支持localStorage")
}

2.小示例

var storage = localStorage;
storage['user'] = 'niki';
storage.setItem('work', 'boss');
console.info(storage.length); // 2
console.info(storage.user + ' is ' + storage.work);  // niki is boss

本地存储使用起来还是很简单的,看看文档的接口什么的就马上会用了,我也就简单记录一下自己的小心得,写的不是很具体

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容