web本地存储相关知识

1、本地存储都有哪几种方式

web端的本地存储主要分为如下4种形式：cookie，sessionStorage，localStorage，indexedDb。其中indexedDb是一个小型数据库，这里不做讨论

2、cookie sessionStorage localStorage有哪些共同点？

• 他们存储数据的字段都是string
• 都有跨域限制

3、cookie sessionStorage localStorage有哪些不同点？

cookie	sessionStorage	locaStorage
类型	String，不用键值名通过;分割	原型为Storage
网络请求	跟随网络请求，每次发送都会携带	不会携带
生命周期	有过期时间，服务端以及客户端都可以操作	当前页面，页面关闭后数据丢失
大小	4k左右（因为随网络请求发送）	5M左右（具体看浏览器的实现）

4、sessionStorage与localStorage方法

为了比较区别，我们同时打开两个相同的网页(比如百度)

    let key1 = 'testKey';
    let num1 = sessionStorage.getItem(key1);
    console.log(num1); // null null
    if(num1) {
        num1 = parseInt(num1) + 1;
    } else {
        num1 = 0;
    }
    sessionStorage.setItem(key1, num1);

    let key2 = 'testKey2';
    let num2 = localStorage.getItem(key2);
    console.log(num2); // null 0
    if(num2) {
        num2 = parseInt(num2) + 1;
    } else {
        num2 = 0;
    }
    localStorage.setItem(key2, num2);

将上述代码放到第一个窗口以及第二个窗口分别执行，即可看到运行结果。可以看出sessionStorage的值是独立的，而localStoage得值是共享得

其他方法

sessionStorage以及localStorage还有如下方法：

• key(); 该方法得参数是一个数字，表明查询storage中第几项元素的值。不建议使用该方法因为不同的用户代理实现storage方法不同，可能会对这个产生差异造成影响
• remove(); 该方法接受的参数是一个字符串，表明要删除的元素键值
• clear(); 清空所有storage