localStorage 本地存储 + document.cookie

localStorage 本地存储 + document.cookie 1属性名localStorage.setItem()谐音读音喽扣 斯多瑞吉 赛特 爱特姆使用方法localStorage.setItem(‘键名’‘内容’)讲解属性作用保存数据到本地存储键和值都必须是字符串。对象 / 数组不能直接存要用JSON.stringify()转字符串。使用场景记住用户表单筛选条件刷新页面数据不丢失保存主题色、页面布局偏好记住登录账号记住账号功能不存密码使用图2属性名localStorage.getItem()谐音读音喽扣 斯多瑞吉 盖特 爱特姆使用方法let filterStr localStorage.getItem(‘goodsFilter’)讲解属性作用根据 key 读取本地存储的数据。如果 key 不存在返回 null。使用场景页面刷新初始化读取上次保存的筛选条件回填表单读取记住的账号赋值给输入框读取缓存配置、主题设置使用图3属性名localStorage.removeItem ()谐音读音喽扣 斯多瑞吉 瑞木呜 爱特姆使用方法localStorage.removeItem(‘token’)讲解属性作用删除一条指定 key 的数据。使用场景退出登录删除 token、记住的账号信息只删指定字段其它缓存保留使用图4属性名localStorage.clear ()谐音读音喽扣 斯多瑞吉 克丽尔使用方法localStorage.clear ()讲解属性作用清空全部localStorage所有 key 全部删掉。使用场景退出登录清除页面全部本地缓存使用图5属性名hasOwnProperty谐音读音哈兹 欧恩 普若坡提使用方法localStorage.hasOwnProperty讲解属性作用判断某个 key 是否存在于 localStorage。也可以判断 getItem(key)!null 实现同样效果。使用场景判断是否保存过记住账号存在才做表单回填。使用图6属性名document.cookie谐音读音豆扣门特 库基使用方法document.cookie ‘usernamelisi’讲解属性作用读写 cookiecookie 是字符串格式会自动随 http 请求发给后端可以设置过期时间。 读取拿到的是一整条分号分隔字符串需要split()分割解析每一条。使用场景后端会话 session 依赖 cookie保存会话标识存储少量需要传给后端的信息设置过期时间可以控制数据什么时候失效使用图