关于cookies,sessionStorage和localStorage的区别
如果我说得啰嗦了,请麻烦提醒我一下~~
面试的时候说:
首先这三个可以在浏览器端按下F12,在Application可以查看到.
如下图:
cookies:
sessionStorage:
sessionStorage的生命周期比较短
localStorage:
1. js给我们提供了一个本地数据存储的方案: window.localstorage
2. 可以做存, 取, 删的操作
* setItem("key", "value")
* getItem("key")
* removeItem("key")
3. 数据是存储在用户的电脑上的, 一直存储,时间比较长
sessionStorage的生命周期比较短,只要关闭浏览器,数据就没有了。
应用场景:就比如跨页面的表单填写啊,临时的去记录一些数据。
localStorage的数据是存储在用户的电脑上的,一直存储,时间比较长,除非用户手动去清除它。
应用场景:比如说用于记录,搜索历史,购物车啊,用户关闭浏览器,下次打开数据还存在。
localStorage的应用范围更加广泛。
举一个小栗子,自己在做webapp的时候用到的
搜索页面的功能分析
- 添加搜索历史记录 : 当前搜索框输入内容 点击搜索按钮 会搜索的内容添加到搜索历史记录的列表
- 给搜索按钮添加点击事件
- 获取当前输入输入的内容
- 获取本地存储对象 如果没有就设置为一个空数组
- 把当前输入的内容 添加到数组里面
- 把数组重新存储到本地存储里面
- 查询搜索历史记录: 查询搜索历史记录渲染到列表里面
- 获取本地存储的历史记录 (转成数组)
- 使用数组渲染页面
- 删除搜索历史记录 点击x的时候要删除当前行的搜索历史记录
- 要给所有x添加点击事件
- 拿到当前点击的x对应的搜索历史的id
- 从所有的数组里面查找这个id 把当前的值删除掉
- 重新把删除后的数组保存到本地存储里面
- 删完之后重新渲染页面(要重新查询一次)
- 清空搜索历史记录 点击清空记录的时候 清除所有的搜索历史记录
- 点击某个搜索历史时候调整到商品列表页面实现搜索当前商品
- 以上的所有功能都是操作本地存储只是操作本地存储的增删改查 localStorage
- 本地存储有两个
- localStorage : 数据永久存在除非手动删除 存储空间大 (永久存储)
- sessionStorage : 关掉浏览器数据就自动删除 存储空间小(临时存储)
关于cookies,sessionStorage和localStorage的区别的更多相关文章
- cookies,sessionStorage和localStorage的区别
联系: sessionStorage和localStorage一样,都是用来缓存客户端缓存信息. 他们都只能存储字符串类型对象. 区别: localStorage的生命周期是永久的,除非用户主动清除浏 ...
- cookies,sessionStorage 和 localStorage 的区别
请描述一下 cookies,sessionStorage 和 localStorage 的区别? sessionStorage 和 localStorage 是HTML5 Web Storage AP ...
- 7,请描述下cookies,sessionStorage和localStorage的区别
7,请描述下cookies,sessionStorage和localStorage的区别 首先,cookie是网站为了标识用户身份而储存在用户本地终端(client side,百科: 本地终端指与计算 ...
- cookies、sessionStorage和localStorage的区别
cookies.sessionStorage和localStorage的区别 对比 特性 Cookie LocalStorage SessionStorage 数据的生命周期 ...
- cookies,sessionStorage和localStorage的区别
共同点:都是保存在浏览器端,且同源的.区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStora ...
- 描述一下 cookies,sessionStorage 和 localStorage 的区别?
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- cookies,sessionStorage,localStorage的区别
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...
- 描述一下 cookies,sessionStorage 和 localStorage 的区别
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密),数据会在浏览器和服务器间来回传递.sessionStorage和localStorage不会自 ...
- 请描述一下 cookies,sessionStorage和localStorage的区别?
cookie在浏览器和服务器间来回传递. sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大:sessionStorage和 ...
随机推荐
- 【二叉树的递归】02二叉树的最大深度【Maximum Depth of Binary Tree】
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 给定一个二叉树,找出他的最小的深度 ...
- 【二叉查找树】02不同的二叉查找树个数II【Unique Binary Search Trees II】
提到二叉查找树,就得想到二叉查找树的递归定义, 左子树的节点值都小于根节点,右子树的节点值都大于根节点. +++++++++++++++++++++++++++++++++++++++++++++++ ...
- LiveMediaStreamer
LiveMediaStreamer is an open source multimedia framework that allows the manipulation of multiple au ...
- VBA中的函数Timer用法
第1.40例 Timer 函数一.题目: 要求编写一段代码,运用 Timer 函数来计算本代码运行所化的时间.二.代码:Sub 示例_1_040() Dim t, i&, a t ...
- play 学习 一 : 构建SBT的play项目
因为帮一个朋友做一个简单的项目,档案管理.同时也为了自己能学习PLay框架,所以记录一下. 项目GitHub地址: https://github.com/liufeiSAP/ArchiveManage ...
- 微服务学习一 微服务session 管理
集群和分布式架构中: session管理有三种方法: 1: Cookie: 将Session对象保存在Cookie,保存在浏览器端.浏览器发送请求的时候,会把整个session放在请求里一起发送到se ...
- hibernate HQL查询
hql(都要在事务中完成)session.beginTransaction();session.getTransaction().commit(); session.beginTransaction( ...
- 【原】spring jar 下载
作者:david_zhang@sh [转载时请以超链接形式标明文章] 链接:http://www.cnblogs.com/david-zhang-index/p/8098965.html 1.进入官网 ...
- servlet课堂笔记
1.servlet生命周期: 1> 加载和实例化 2> 初始化 init() 3> 处理请求 service()->doGet()/doPost() 4> 销毁 dest ...
- Dialog 自定义使用3(回调点击事件)
1 , Dialog布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...