localStorage示例

// 业务场景：用户临时登录信息、用户页面配置、当前临时数据
// local适合存储需要长期保存到本地的数据-用户页面配置
// session适合关闭浏览器及时清除缓存的场景-页面直接传递的参数
// 本地存储localStorage&sessionStorage,不可跨域跨浏览器
// length:返回存储的数据项数量
// setitem(key,value)：新增键值对，如果键名已存在则更新
// getitem(key)：返回键名对应的值
// removeitem(key)：从存储中删除该键名
// key(n)：返回存储中的第n个键名
// clear()：清除所有键名
// web应用程序在用户浏览器中对数据进行本地存储，可存储大数据量，不与服务端交互
// 检测 localStorage 和 sessionStorage 的浏览器支持
if(typeof(Storage)!="undefined"){
    document.getElementById("test").innerHTML = "you can use localStorage";
    // 1、window.localStorage存储没有截止日期的数据
    // 3种存值方法
    localStorage.setItem("test1","1");
    localStorage.test2 = 2;
    localStorage['test3'] = 3;
    // 取出数据 
    // 存储在webStorage中的键值对都是字符串
    console.log(localStorage.getItem("test1"));
    console.log(localStorage.test2);
    console.log(localStorage['test3']);
    // 删除本地存储
    localStorage.removeItem('test1');
    console.log(localStorage.getItem("test1"));
    console.log(localStorage.getItem("test2"));
    console.log(localStorage.getItem("test3"));

    // 存储对象，将对象转为字符
    localStorage.obj = JSON.stringify({name:'blue',age:18});
    // 获取对象，并解析json字符串，构造对象
    let obj = JSON.parse(localStorage.obj);
    let age = obj.age;
    let name = obj.name;
    console.log(name);
    console.log(age);

    // 2、sessionStorage对象
    // 等同于localStorage对象，不同在于只对一个session存储数据，如果关闭浏览页标签页，数据也会被删除。
    // 在sessionStorage中存入test值为1
    sessionStorage.test1 = 1;
    sessionStorage.setItem("test2",2);
    sessionStorage['test3'] = 3;
    // 取值
    console.log(sessionStorage.test1);
    console.log(sessionStorage.getItem('test2'));
    console.log(sessionStorage['test3']);
    // 删除
    sessionStorage.removeItem('test1');
    console.log(sessionStorage.getItem("test1"));
    console.log(sessionStorage.getItem("test2"));
    console.log(sessionStorage.getItem("test3"));
}else{
    document.getElementById("test").innerHTML = "you can't use localStorage";
}