前端学习（八十二） DOM-数据存储（Dom）

浏览器端的数据存储，也就是Web Storage的用法

Storage实例对象一共有两个（全局对象）：localStorage，sessionStorage，因为是全局对象，所以可以通过winow.localStorage和window.sessionStorage来访问

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

方法

setItem()

接收一个键名和值作为参数，将会把键值对添加到存储中，如果键值对已经存在，则更新覆盖

localStorage.setItem('abc','abc')

键值都会以字符串的形式存储，如果不是则会转换成字符串再存储，当然不一定会设置成功，假如设置失败，则会抛出QuotaExceededError错误，表示存储空间满

因为是一个对象，因此可以使用对象的方法设置属性，比如localStorage.abc='abc'，这些

getItem()

接收一个键名作为参数，返回键名对应的值，假如没有对应的值，返回null

localStorage.getItem('abc')

removeItem()方法

接收一个键名作为参数，把该键名从存储中删除

localStorage.removeItem('abc')

clear()

清空存储中所有的键名

localStorage.clear()

key()

接收一个整数n作为参数，并返回存储中第n个键名，注意：由于键的顺序是浏览器自己决定的，并不是用户添加的顺序，所以不要依赖这个方法

localStorage.key(0)

length属性

返回一个整数，表示存储在Storage对象中键值对的数量

localStorage.length

StorageEvent

当Storage对象发生变化时，抛出的StorageEvent事件，利用这个事件可以作出对应操作，注意：当Storage对象发生变化，和它同域的，其他tab中打开的页面会收到StorageEvent事件，当前页面是不会收到的

StorageEvent事件的属性

属性	说明
key	发生变化的属性，如果是clear方法，则该值为null
oldValue	旧值，如果是clear或者removeItem方法，则该值为null
newValue	新值，如果是clear方法，或者setItem设置的是一个新属性时，该值为null
url	发生变化的Storage对象的所在页面URL
storageArea	备操作的storage对象

示例

        <input id="setNewDate" type="button" value="set new date">
        <div id="now"></div>
        <script>
            window.addEventListener('storage',function (params) {
                console.log(params.key,params.newValue,params.oldValue,params.storageArea,params.url);
                
            },false)
            function setNewDate(){
                var newDate=new Date().toString();
                localStorage.setItem('now',newDate);
                document.getElementById('now').innerHTML = newDate;
            }
            //监听按钮事件
            document.getElementById('setNewDate').addEventListener('click',setNewDate);
        </script>

同步特性

Storage的所有方法都是同步的，意味着他们会阻塞主页面的渲染以及其他操作

容量有限制

由于localStorage中的数据是要保存到用户电脑的磁盘上的，如果容量不限制，则攻击者可以写恶意代码将用户的磁盘塞满，因此通常容量大小不超过10M

使用场景

localStorage：可以把一些非必须的，但是又能提升用户体验的功能数据保存到localStorage里面，最常见的就是用户自定义设置信息（例如视频或者图片网站上用户选择的列表模式和图片模式等）

sessionStorage：适合保存在某次使用过程中，指挥用到一次的功能数据（例如，只有在页面打开后提示的广告，只有当浏览器关闭后再开启才会重新打开）

注意：不要把敏感数据保存在Storage中，比如公司的机密数据，用户的隐私数据等等

前端学习（八十二） DOM-数据存储（Dom）

猜你喜欢