zoukankan      html  css  js  c++  java
  • 本地存储之sessionStorage

    源码可以到GitHub上下载!
    sessionStorage:
      关闭浏览器再打开将不保存数据
     
      复制标签页会连同sessionStorage数据一同复制

      复制链接地址打开网页不会复制seessionStorage内的数据
     
      清除缓存加载当前页对页面无影响

        1) 同源策略限制。若想在不同页面之间对同一个sessionStorage进行操作,这些页面必须在同一协议、同一主机名和同一端口下。(IE 8和9存储数据仅基于同一主机名,忽略协议(HTTP和HTTPS)和端口号的要求)

        2) 单标签页限制。sessionStorage操作限制在单个标签页中,在此标签页进行同源页面访问都可以共享sessionStorage数据。

        3) 只在本地存储。seesionStorage的数据不会跟随HTTP请求一起发送到服务器,只会在本地生效,并在关闭标签页后清除数据。(若使用Chrome的恢复标签页功能,seesionStorage的数据也会恢复)。

        4) 存储方式。seesionStorage的存储方式采用key、value的方式。value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串。true值会转换为"true")。

        5) 存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。

      可访问 http://dev-test.nemikor.com/web-storage/support-test/ 测试浏览器的存储上限。
     1         // sessionStorage使用示例
     2         var username = document.getElementById("username"); // 获取input username
     3         var userpwd = document.getElementById("userpassword"); // 获取input userpassword
     4         var remember = document.getElementById("remember"); // 获取记住账号密码
     5         // 点击复选框记住 账号、密码、复选框
     6         function rememberValue() {
     7             if (remember.checked == true) {
     8                 sessionStorage.setItem('user', username.value);
     9                 sessionStorage.setItem('pwd', userpwd.value);
    10                 sessionStorage.setItem('remember', remember.checked);
    11             } else {
    12                 sessionStorage.removeItem("user");
    13                 sessionStorage.removeItem("pwd");
    14                 sessionStorage.removeItem("remember");
    15                 // sessionStorage.clear();// 全部删除
    16             }
    17         }
    18         // 页面加载完毕后从sessionStorage里读取值并填入相应的标签内
    19         window.onload = function () {
    20             username.value = sessionStorage.getItem("user");
    21             userpwd.value = sessionStorage.getItem("pwd");
    22             remember.checked = sessionStorage.getItem("remember");
    23         }
  • 相关阅读:
    IDE IntelliJ IDEA ToolsTable 窗口找回
    Equals方法与“==”区别
    JAVA虚拟机内存分配与回收机制(转)
    java集合框架总结三--Set接口及其子类
    2014年4月5日 java集合框架总结2--List接口及其子类
    java集合框架总结一
    sql 操作数据库
    EF框架用中使用mysql数据库需要安装mysql-for-visualstudio
    mysql 服务启动不了;无法启动MYSQL服务”1067 进程意外终止”解决办法
    mysql 修改密码
  • 原文地址:https://www.cnblogs.com/lprosper/p/9566832.html
Copyright © 2011-2022 走看看