html5之客户端存储

WebStorage介绍

所谓的WebStorage指的是客户端存储,在这里指的是浏览器端存储,比如在网站上自动登陆这些功能,其实就是把一些少量的数据存储在浏览器等客户端中,这样可以减少没必要的请求到服务器,降低服务器的压力,给用户提供更好的体验.

WebStorage的三种存储方式

  1. cookie: 广泛使用 存储量4kb左右 会在浏览器和服务器间传递 一般由服务器端创建 可以设置存储时间(默认和session一样) cookie不容易操作 jquery.cookie.js插件
  2. session(会话)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(浏览器的内存中) 只会由浏览器端创建 存储时间是打开浏览器开始关闭浏览器消失 方法简洁明了 容易操作
  3. local(本地)Storage: H5新增 存储量5M左右 只会在浏览器存储数据(存储在硬盘中) 只会由浏览器端创建 永久存储除非手动删除 方法简介明了 容易操作

localStorage

  1. 添加数据: window.localStorage.setItem(key,value);
  2. 获取数据: window.localStorage.getItem(key);
  3. 移除数据: window.localStorage.removeItem(key);
  4. 清除数据: window.localStorage.clear();
  5. 获取key: window.localStorage.key(n);

sessionStorage

  1. 添加数据: window.sessionStorage.setItem(key,value);
  2. 获取数据: window.sessionStorage.getItem(key);
  3. 移除数据: window.sessionStorage.removeItem(key);
  4. 清除数据: window.sessionStorage.clear();
  5. 获取key: window.sessionStorage.key(n从0开始);
  • 应用场景: 存储一些少量临时的数据(比较少用)

总结

  1. localStorage和sessionStorage只能存储json
  2. 存储的数据不能太多 太多浏览器会卡

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏专注于主流技术和业务

WebStorage是什么?

使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这...

10430
来自专栏娱乐心理测试

vue中 localStorage的使用方法(详解)

vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了c...

53220
来自专栏前端知识分享

第180天:HTML5——本地存储

localStorage方法存储的数据没有时间限制。第二天、第二周甚至是第二年之后,数据依然可用。

11540
来自专栏Hongten

给大家分享一个省市区选择框_js实现

=================================================

32810
来自专栏互联网软件技术

本地存储之sessionStorage

  复制链接地址打开网页不会复制seessionStorage内的数据

19640
来自专栏前端小叙

vue-router 2 跳转失败原因

axios.post('/internal/user/login_from_mobile ',{ mob...

29580
来自专栏IMWeb前端团队

JavaScript强化教程——sessionStorage和localStorage

本文作者:IMWeb 王军 原文出处:IMWeb社区 未经同意,禁止转载 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScr...

27280
来自专栏Golang语言社区

【Go 语言社区】 HTML5 前端--数据保存实例

保存数据--->到本地s.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E...

37640
来自专栏杨龙飞前端

localstorage在safri下的坑

22150
来自专栏腾讯IVWEB团队的专栏

React-Native 安卓预加载优化方案

React-Native安卓预加载优化方案本文针对使用React Native开发混合应用的过程中安卓端白屏时间较长的问题,提出了react-native安卓端...

1.2K00

扫码关注云+社区

领取腾讯云代金券