localStorage/sessionStorage学习笔记

基本概念

存储对象是简单的键值存储，类似于对象，但是它们在页面加载时保持完整。键和值始终是字符串（请注意，与对象一样，整数键将自动转换为字符串）。

Web Storage 包含如下两种机制：

1. sessionStorage 为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。
2. localStorage 同样的功能，但是在浏览器关闭，然后重新打开后数据仍然存在。

localStorage的存储方式(sessionStorage同理)

1. localStorage.name = 'lebron' ;
2. localStorage['name'] = 'lebron';
3. localStorage.setItem('name','lebron');

官方推荐使用localStorage.setItem()的方式进行存储,Storage.setItem() 方法可被用来创建新数据项和更新已存在的值。该方法接受两个参数——要创建/修改的数据项的键，和对应的值。

localStorage的读取方式

localStorage.getItem('name');

使用 Storage.getItem() 可以从存储中获取一个数据项。该方法接受数据项的键作为参数，并返回数据值。

localStorage的删除方式

localStorage.removeItem('name');

Storage.removeItem() 接受一个参数,你想要移除的数据项的键，然后会将对应的数据项从域名对应的存储对象中移除。

localStorage的清空方式

localStorage.clear()

Storage.clear() 不接受参数，只是简单地清空域名对应的整个存储对象。

如何判断当前浏览器是否支持localStorage/sessionStorage

• 可以使用window.localStorage/window.localStorage的方式来判断是否支持

if(window.localStorage){
    alert('支持localStorage')
}else{
    alert('不支持localStorage')
}

localStorage与sessionStorage的区别

• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
• sessionStorage除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
• localStorage只要不主动清除，理论上是一直保存的，sessionStorage只要关闭浏览器（也包括浏览器的标签页），就会被清除。

容量

• 绝大多数浏览器有 5M 的大小限制。

跨域问题

• localstorage是存在跨域的问题，无法让子域名继承父域名的localstorage数据。

存储类型须知

• 一般localStorage会自动将localStorage转换成为字符串形式
• 如果需要存入json的数据，需要先JSON.stringify(),转成字符串再存入，取出的时候，也需要JSON.parse()再转为json。需要注意的是，其他类型读取出来也要进行转换。