localStorage 和 sessionStorage

HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage; 两者都是仅在客户端(即浏览器)中保存,不参与和服务器的通信

  1. sessionStorage(临时存储) :为每一个数据源维持一个存储区域,在浏览器打开期间存在,包括页面重新加载 ,关掉浏览器即被清除
  2. localStorage(长期存储) :与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在

1. 保存数据到本地

sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON

const info = {
name: 'xiaohua',
age: 20,
id: '01'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

localStorage.setItem("key", "value");//key为存储数据名,类似与var name="夏尔"中的name类似。 或 localStorage.key="value";//类似于对象的操作方法

2. 从本地存储获取数据

var value=sessionStorage.getItem("key");//value即为所存的值
var value=localStorage.getItem("key");//value即为所存的值

3. 本地存储中删除某个保存的数据

   sessionStorage.removeItem('key');
localStorage.removeItem('key');

4. 删除所有保存的数据

  sessionStorage.clear();
localStorage.clear();

5. 监听本地存储的变化

Storage 发生变化(增加、更新、删除)时的 触发,同一个页面发生的改变不会触发,只会监听同一域名下其他页面改变 Storage

6. 提供了key方法用于遍历

function showStorage(){
for(var i=0;i<localStorage.length;i++){
//key(i)获得相应的键,再用getItem()方法获得对应的值
console.log(localStorage.key(i),
localStorage.getItem(
localStorage.key(i)));
}
}

一、sessionStorage 、localStorage 和 cookie 之间的区别

共同点:都是保存在浏览器端,且同源的。

区别:

1.存储位置不同:

cookie: 数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递;同时还可以限制cookie只属于某个路径下。

sessionStorage、localStorage:不会自动把数据发给服务器,仅在本地保存。

2.存储大小不同:

cookie:只适合保存很小的数据(因为每次http请求都会携带cookie),如会话标识。

sessionStorage和localStorage: 虽然也有存储大小的限制,但比cookie大得多。

3.数据有效期不同:

sessionStorage:仅在当前浏览器窗口关闭前有效;

localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;

cookie: 只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

4.作用域不同:

sessionStorage : 不在不同的浏览器窗口中共享,即使是同一个页面;

localStorage:  在所有同源窗口中都是共享的;

cookie: 在所有同源窗口中都是共享的。

二、cookie和session的区别:

1、session保存在服务器,客户端不知道其中的信息;cookie保存在客户端,服务器能够知道其中的信息

2、session中保存的是对象,cookie中保存的是字符串

3、session不能区分路径,同一个用户在访问一个网站期间,所有的session在任何一个地方都可以访问到

而cookie中如果设置了路径参数,那么同一个网站中不同路径下的cookie互相是访问不到的

* sessionStorage 、localStorage 、session、cookie *

简言之:

  localStorage: 浏览器端持久化存储, 关闭浏览还存在, 最大5MB(基本没限制了)
  sessionStorage: 浏览器端内存存储, 关闭浏览器不存在
  session: 服务器端创建, 服务器端保存, 依赖于cookie
  cookie: 服务器端创建, 浏览器端保存, 请求携带对应cookie, 长度和数量有限制(4kb)

localStorage、sessionStorage、cookie、session的更多相关文章

  1. localStorage、sessionStorage和cookie的区别

    本地客户端(浏览器)查看三者信息: HTML4的本地存储:cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等根服务端进行数据交互. 一.co ...

  2. 浅谈localStorage、sessionStorage 与cookie

    由于工作的需要,今天使用了下localStorage.sessionStorage和cookie,感觉这玩意儿还挺好用的. 关于localStorage与sessionStorage的知识点以及用法之 ...

  3. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  4. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  5. 5月16日 python学习总结 DBUtils模块、orm 和 cookie、session、token

    一.DBUtils模块 介绍 The DBUtils suite is realized as a Python package containing two subsets of modules, ...

  6. Cookie的使用、Cookie详解、HTTP cookies 详解、获取cookie的方法、客户端获取Cookie、深入解析cookie

    Cookie是指某些网站为了辨别用户身份.进行session跟踪而存储在用户本地终端上的数据(通常经过加密),比如说有些网站需要登录才能访问某个页面,在登录之前,你想抓取某个页面内容是不允许的.那么我 ...

  7. localStorage , sessionStorage ,cookie 使用介绍

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. localStorage,sessionStorage和cookie的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  9. 使用localStorage,sessionStorage,cookie等存储

    Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加.删除.修改.查询操作. 特点: localStor ...

  10. 6.cookie、session,localStorage、sessionStorage

    必须在服务器下运行 cookie/session 存东西 cookie 时间 过期时间 4k 服务器把一部分数据保存在客户端(浏览器) session 回话 时间 服务器存取用户信息 5M local ...

随机推荐

  1. 【技术累积】【点】【java】【8】maven常用命令(持续更新)

    建立 mvn archetype:generate -DgroupId=com.andy.test -DartifactId=test-project -Dversion=0.0.1-SNAPSHOT ...

  2. (转)基于MVC4+EasyUI的Web开发框架经验总结(3)- 使用Json实体类构建菜单数据

    http://www.cnblogs.com/wuhuacong/p/3669708.html 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开 ...

  3. 如何快速在命令提示符(cmd)中打开指定的文件夹路径!

    按住shift键然后 右击,如图:

  4. Java中的常量

    常量的概念 是指在Java程序中固定不变的数据.我们可以理解为是一种特殊的变量,它的值被设定后,在程序运行过程中不允许改变. 常量的分类 整数常量:  所有的整数   例如 100 -100 123 ...

  5. xshell登录centos7很慢解决办法

    使用xshell登录到centos系统虚拟机,可以登录上去,但是认证速度特别慢. 因为在登录时,需要反向解析dns,因此,修改linux配置文件,vi /etc/ssh/sshd_config,将其注 ...

  6. POJ 2486 Apple Tree (树形dp 经典题)

    #include<cstdio> #include<cstring> #include<algorithm> using namespace std; const ...

  7. tsar采集数据原理

    系统模块 cpu 字段含义 user: 表示CPU执行用户进程的时间,通常期望用户空间CPU越高越好. sys: 表示CPU在内核运行时间,系统CPU占用率高,表明系统某部分存在瓶颈.通常值越低越好. ...

  8. WEBGL学习【九】立方体贴不同的纹理

    <html> <!--开始实现一个三维街景的渲染效果--> <head> <meta http-equiv="Content-Type" ...

  9. webapi get请求 FromUri list参数传递

    今天做项目调用第三方的webapi时,发现get请求竟然用的是FromUri list参数,汗... 这里简单记录下请求传参的方式(但不推荐大家使用get FromUri list参数 来定义weba ...

  10. Windows使用docker打开新窗口error解决办法

    环境 win7 Error: error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.26/containers/json ...