什么是localstorage

前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题:

① cookie大小限制在4k左右,不适合存业务数据
② cookie每次随HTTP事务一起发送,浪费带宽

localstorage可以说是对cookie的优化,使用它可以方便在客户端存储数据,并且不会随着HTTP传输,但也不是没有问题:

① localstorage大小限制在500万字符左右,各个浏览器不一致
② localstorage在隐私模式下不可读取
③ localstorage本质是在读写文件,数据多的话会比较卡(firefox会一次性将数据导入内存,想想就觉得吓人啊)
④ localstorage不能被爬虫爬取,不要用它完全取代URL传参

  

HTML5 提供了两种在客户端存储数据的方法:

  • localStorage - 没有时间限制的持久的数据存储,只要你不主动删除可以想存多久存多久。
  • sessionStorage - 针对一个 session 的数据存储,这些数据只有在同一个会话中的页面才能访问,当会话结束后数据也随之销毁(例如你在网页上存储一些数据后关闭网页再重新打开,存储的数据就没有了)。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

浏览器支持情况

  浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
  要判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){
alert("浏览支持localStorage")
}else{
alert("浏览暂不支持localStorage")
}
//或者
if(typeof window.localStorage == 'undefined'){
alert("浏览暂不支持localStorage")
}

localstorage的使用

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem、removeItem、clear等。

setItem存储value

用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");

getItem获取value

用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");

removeItem删除key

用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:sessionStorage.removeItem("key"); localStorage.removeItem("site");

clear清除所有的key/value

用途:清除所有的key/value
用法:.clear()
代码示例:sessionStorage.clear(); localStorage.clear();

原文:

https://www.cnblogs.com/yexiaochai/p/4509472.html

https://www.cnblogs.com/qiutianlidehanxing-blog/p/5953746.html

HTML5 web存储之LocalStorage和sessionStorage的更多相关文章

  1. 使用HTML5 Web存储的localStorage和sessionStorage方式

    localStorage(本地存储),可以长期存储数据,没有时间限制,一天,一年,两年甚至更长,数据都可以使用.sessionStorage(会话存储),只有在浏览器被关闭之前使用,创建另一个页面时同 ...

  2. HTML5本地存储之localStorage、sessionStorage

    1.概述 localStorage和sessionStorage统称为Web Storage,它使得网页可以在浏览器端储存数据. sessionStorage保存的数据用于浏览器的一次会话,当会话结束 ...

  3. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  4. HTML 5 Web 存储:localStorage和sessionStorage

    本文内容摘自http://www.w3school.com.cn/ 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessi ...

  5. (转)HTML5开发学习(2):本地存储之localStorage 、sessionStorage、globalStorage

    原文:http://www.cnblogs.com/xumingxiang/archive/2012/03/25/2416386.html HTML5开发学习(2):本地存储之localStorage ...

  6. html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例

    这篇文章主要介绍了html5本地存储的localstorage .本地数据库.sessionStorage简单使用示例,需要的朋友可以参考下 html5的一个非常cool的功能,就是web stora ...

  7. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  8. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  9. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

随机推荐

  1. 一款DMA性能优化记录:异步传输和指定实时信号做async IO

    关键词:DMA.sync.async.SIGIO.F_SETSIG. DMA本身用于减轻CPU负担,进行CPU off-load搬运工作. 在DMA驱动内部实现有同步和异步模式,异步模式使用dma_a ...

  2. Linux内存管理 (25)内存sysfs节点解读

    1. General 1.1 /proc/meminfo /proc/meminfo是了解Linux系统内存使用状况主要接口,也是free等命令的数据来源. 下面是cat /proc/meminfo的 ...

  3. 通过Docker发布RestAPI遇到的种种问题

    目标:发布一个分词API 问题1:Docker外无法访问API 原因: Docker映射的地址是0.0.0.0:8888端口,而flask启动的时候默认地址是127.0.0.1:5000,需要手动配置 ...

  4. 线性回归和Logistic回归

    目录 线性回归 用线性回归模型拟合非线性关系 梯度下降法 最小二乘法 线性回归用于分类(logistic regression,LR) 目标函数 如何求解\(\theta\) LR处理多分类问题 线性 ...

  5. 你不知道的 requestIdleCallback

    本文副标题是 Request Schedule 源码解析一.在本章中会介绍 requestIdleCallback 的用法以及其缺陷, 接着对 React 团队对该 api 的 hack 部分的源码进 ...

  6. 二十八、layui的日历组件使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Sql Server登录失败问题

    1.启动SQL Server 2008 Management Studio,会看到 2. 里面有一个 身份验证.这个 身份验证 的下拉列表里面有两个选项: Windows 身份验证 和 SQL Ser ...

  8. 软件工程(FZU2015) 赛季得分榜,第一回合

    SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分=团队得分+个人贡献分 个人贡献分: 个人 ...

  9. 常用CSS3

    (ಥ_ಥ)    啊啊,我的胃好疼啊.感觉最近胃又开始不舒服了.啊——果然老了呢,想当初,我也是不坏金刚之身来着呢,唉,我的可怜的小胃胃   (ಥ_ಥ) 记录几个已经常见的不能再常见的css3样式. ...

  10. C++ 动态链接库 DLL 的一些笔记

    DLL 文件源代码: // test.h #ifdef TEST_EXPORTS #define TEST_API __declspec(dllexport) #endif class TEST_AP ...