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

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

你可能感兴趣的:(HTML5本地存储(localStorage和sessionStorage))