web storage

介绍

在html4及以前，在客户端存储用户数据（包括个人信息，浏览痕迹等），依赖的是cookie，而cookie有其天生的劣势，导致有些情况不能满足需求或者影响用户体验。

cookie的劣势体现在以下方面：

1.cookie的大小限制在4KB，不适合大量数据存储

2.浏览器还限制站点可以在用户计算机上存储的cookie的数量

3.cookie是随HTTP事务一起被发送的，因此会浪费一部分带宽

到了html5，cookie变得不再必需

HTML5很好的提供了本地存储的功能，以键值对存储的解决方案，支持容量至少为4M，不用安装任何插件。HTML5的web Storage提供了两种客户端存储数据的方法。

1.localStorage：是一种没有时间限制的数据存储方式，可以将数据永久保存在客户端

2.sessionStorage ：指的是针对一个session（会话）的数据存储，即将数据保存在session对象中，当关闭浏览器后，这些数据会被删除

这里给出官方参考文档：http://www.w3school.com.cn/html5/html_5_webstorage.asp

使用

在使用web存储前，应检查浏览器是否支持localStorage和sessionStorage

if(typeof(Storage)!=="undefined"){
				//支持
				//coding
			}else{
				//不支持
			}

注意：IE7及更早的版本不支持web storage

web storage支持 的属性和方法

1.gerItem(key)方法：获取指定key所存储的value值

2.key(index)方法：返回列表中对应索引的key值

3.length属性：返回key/value对列表的长度

4.removeItem(key)方法：从Storage中删除一个对应的键值对

5.setItem(key,value)方法：将value存储到key指定的字段

6.clear()方法：移除storage中所有的key/value对

提示：设置、获取key/value的方法除了使用setItem()和getItem()方法外，还提供了更简单的方法：

设置方法：sessionStorage.someKey="someValue"

获取方法：alert(sessionStorage.someKey)

实例

在之前的vue商店项目中，在seller组件里有用到过localStorage，在src/common/js/store.js中有如下代码

export function saveToLocal(id, key, value) {
	let seller = window.localStorage.__seller__;
	if (!seller) {
		seller = {};
		seller[id] = {};
	} else {
		seller = JSON.parse(seller);
		if (!seller[id]) {
			seller[id] = {};
		}
	}
	seller[id][key] = value;
	window.localStorage.__seller__ = JSON.stringify(seller);
};

export function loadFromLocal(id, key, def) {
	let seller = window.localStorage.__seller__;
	if (!seller) {
		return def;
	}
	seller = JSON.parse(seller)[id];
	if (!seller) {
		return def;
	}
	let ret = seller[key];
	return ret || def;
};

很明显，方法saveToLocal是在向本地添加新的storage，而loadFromLocal是从本地的storage读取数据。

来看seller组件中是如何操作的

点击收藏区域触发的函数

toggleFavorite(event){
				if(!event._constructed){
					return;
				}
				this.favorite=!this.favorite;
				saveToLocal(this.seller.id, 'favorite', this.favorite);
				
			},

点击事件所执行的操作是改变localStorage中this.seller.id下key为favorite的键值对所对应的value值（Boolean类型），那么改变后的favorite值该如何运用呢

   data() {
                    return {
                        favorite: (() => {
                            return loadFromLocal(this.seller.id, 'favorite', false);
                        })()
                    };
                },
   computed:{
                    favoriteText() {
                        return this.favorite ? '已收藏' : '收藏';
                    }
                }

看这段vue代码，favorite被改变时，this.favorite也被实时改变，那么favoriteText()返回值就可以在“已收藏”和“收藏”之间切换，再次刷新对应url时，会永久记忆之前的选择

成功为id为1234的用户保存了之间的选择，刷新后的选择结果依旧没有改变，我们的目的达到了

最后，看下__seller__在localstorage中的存储