编程大白话之-Web 客户端存储数据

今天来和大家一起聊聊HTML5提供的两种存储数据的方法:

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储（当关闭浏览器标签页时数据会丢失）

下面分别对这两种方法进行分析：
localStorage

将数据保存在客户端硬件设备上，不管它是什么，意思就是下次打开计算机时候数据还在，作为一个长期保存。（除非人工清除）

sessionStrage

session即会话的意思，在这里的session是指用户浏览某个网站时，从进入网站到关闭网站这个时间段，session对象的有效期就只有这么长,作为临时保存。

配合本地存储时还需要用到下面的一些功能

1. setltem('key', value) 存储(以对象的形式进行存储)
2. getltem('key') 获取(对应的key便可以拿到值)
3. removeItem('key') 清除存储的key
4. clear(); 清空数据

下面我们简单封装一个大家网页中常见的输入登录框及密码的实例：

var $ = function(id) {
            return document.getElementById(id);
        }
        
        $('submit').onclick = function() {
            var user = $('user').value;
            var password = $('password').value;
            var ls = window.localStorage;       //永久存储
            var ss = window.sessionStorage;     //临时存储
            ls.setItem('user', user);       // 以key, value的形式进行存储
            ss.setItem('password', password);
        }
        ~function() {           //自执行函数
            var ls = window.localStorage;
            var ss = window.sessionStorage;     
            var user = ls.getItem('user');      // 获取key的值并赋值给一个变量
            var password = ss.getItem('password');
            $('user').value = user;             // 将获取到的值赋值给元素的value
            $('password').value = password;
        }();   

Han.PNG

大家可以看到代码中用到了两种存储，一种是将用户名永久存储，而密码则是临时存储，在我关闭页面时，它会自动删除。这是大家经常见到的应用。

说到这里，又出现了一个新的问题，存储的时候有各种不同的数据类型，
我们来看一下存储基本数据类型和复杂数据类型时有什么不同。

Han.png

使用上面的存储或获取的方法时，会自动将内容使用toString方法进行转换
如果是对象或是数组直接使用这个方法，得到的结果不是想要的，所以需要通过序列化的方法，现将数组或对象进行转义

H.png

对象的序列化：JSON.stringify(obj)

将数组或对象序列化为对应的字符串 和toString方法结果不一样
序列化后便可以通过localStorage进行本地存储

对象的反序列化：JSON.parse(str)

参数必须为一个已序列化的字符串(配合上面使用)
如果不进行反序列化，会以字符串的形式进行读取，反序列后会成为引用类型的对象或数组。

当然方法还有很多种，如果不写通过序列化，还可以使用拼接

Han.jpg